как я СУШУ эти функции jquery в одну общую функцию?

Question

У меня есть приложение jquery с несколькими сетками (jqgrid) на разных вкладках.Ниже сетки у меня есть кнопка:

<div id="content1" class="content">
    <table id="grid1" class="myGridClass"></table>
    <input id="ColChooser1"type = "button" value="Choose Columns" class="grid1"></input>
</div>

<div id="content2" class = "content">    
    <table id="grid2" class="myGridClass"></table>
    <input id="ColChooser2"type = "button" value = "Choose Columns" class="grid2"></input>
</div>

У меня есть разные функции для каждой из кнопок выбора столбцов: пример

$('#ColChooser1').click(function(){
  $('grid1').jqGrid('columnChooser');
};

Какой лучший способ написать одну функцию для всехКнопки?

до сих пор это то, что я получил

$('div.content :input[value="Choose Columns"]').click(function{
   $('div.content table.'+this.attr('class')).jqGrid('columnChooser');
});

не уверен, будет ли this.attr('class') всегда одинаковым, несмотря на то, что каждая кнопка имеет тот же класс, что и ее элемент таблицы, так как jquery ui можетдобавить дополнительные классы -

Отредактировано Ниже приведено то, что сработало - близко к 1-му ответу ниже, но немного подправлено -

            $('div.DataContent :input[value="Choose Columns"]').click(function() {
                $(this).parent().find('.myGridClass').jqGrid('columnChooser');
            });

использовало .find вместо .childrenчтобы пройти глубже, чем 1-й уровень (jqgrid глубже вмещает исходный элемент таблицы), также использовался более специфический селектор «.myGridClass», а не «таблица», потому что jqGrid добавляет несколько других элементов таблицы, поэтому использование «таблицы» не возвращает исходныйпредназначенный

Answer 1

Вы можете начать с события нажатия кнопки

$(':input[id^=ColChooser]').click(function(){
var $this = $(this); // button
// Get the table
var $tbl = $this.prev('table');
// Now you have your table, and button apply the grid
});

Answer 2

Посмотрите на страницу в документах jQuery.Вы должны иметь возможность использовать комбинацию этих функций (например, parent, parentUntil, children), чтобы выбрать нужные элементы.

например:

$('div.content :input[value="Choose Columns"]').click(function{
    $(this).parent().children('table').jqGrid('columnChooser');
});

Answer 3

        $('div.DataContent :input[value="Choose Columns"]').click(function() {
            $(this).parent().find('.myGridClass').jqGrid('columnChooser');
        });

использовал .find вместо .children в одном из ответов, представленных для прохождения глубже, чем 1-й уровень (jqgrid вкладывает исходный элемент таблицы глубже), а также использовал более конкретный селектор '.myGridClass', а не 'table', потому что jqGrid добавляет несколько другие элементы таблицы, использующие «таблицу», не возвращают первоначальный предназначенный

Answer 4

прикрепите обработчик щелчка к родительскому элементу для входных данных, а затем найдите таблицу братьев и сестер.

$(parent_container_of_divs).on('click', '.content > input',function(){
    $(this).sibling('table').jqGrid('columnChooser');
});

если эти элементы имеют больше, чем те, которые вы предоставили, давайте будем более конкретными. добавьте обработчик кликов к родителю для ColChooser входов и найдите его родную таблицу grid.

$(parent_container_of_divs).on('click', 'input[id^="ColChooser"]',function(){
    $(this).sibling('table[id^="grid"]').jqGrid('columnChooser');
});