Question

Ive got a jquery app that has several grids (jqgrid) in defferent tabs.
Below ech grid I have a button:

<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>

Ive got different functions for each of the column chooser buttons: example

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

Whats the best way to write one function for all the buttons?

so far this is what Ive got

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

not sure if this.attr('class') will always be the same despite each button having the same class as its table element since jquery ui may add additional classes —

Edited
Below is what worked – close to the 1st answer below but tweaked a bit –

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

used .find instead of .children to traverse deeper than 1st level (jqgrid nests the original table element deeper)
also used a more specific selector ‘.myGridClass’ rather than ‘table’ because jqGrid adds several other table elements, making use of the ‘table’ not return the original one intended

Answer 1

Take a look at the traversing page in the jQuery docs. You should be able to use a combination of these functions (e.g. parent, parentsUntil, children) to select the elements you want.

e.g:

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