Question

我有一个jquery应用程序，在不同的选项卡中有几个网格（jqgrid）。在ech网格下面我有一个按钮：

<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可能会添加其他类 -

被修改 以下是有效的 - 接近下面的第一个答案，但稍微调整了一下 -

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

使用.find而不是.children遍历比第一级更深的（jqgrid将原始表元素更深地嵌套）还使用了一个更具体的选择器'.myGridClass'而不是'table'，因为jqGrid添加了其他几个表元素，利用'table'不返回原来的那个

Answer 1

查看jQuery文档中的traversing页面。您应该能够使用这些函数的组合（例如parent，parentsUntil，children）来选择所需的元素。

e.g：

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

Answer 2

您可以从按钮点击事件开始

$(':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 3

将单击处理程序附加到父项，输入，然后找到兄弟表。

$(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');
});

Answer 4

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

使用.find而不是.children提交的一个答案比第一级更深的遍历（jqgrid将原始表元素更深地嵌套）也使用了更具体的选择器'.myGridClass'而不是'table'，因为jqGrid添加了几个其他表格元素，利用'表'不返回原来的那个

如何将这些jquery函数干掉成一个通用函数？

4 个答案: