2012-04-02 105 views
0

我有一個jQuery應用程序,有不同的選項卡中有幾個網格(jqgrid)。 下面ECH格我有一個按鈕:如何將這些jquery函數幹成一個通用函數?

<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得到了不同的功能爲每個列選擇按鈕:例如

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

最新最好的方式來寫一個函數所有的按鈕?

到目前爲止,這是什麼Ive得到

$('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添加了幾個其他表格元素,的'表'不返回原來的預期

回答

1

看看jQuery文檔中的traversing頁面。您應該能夠使用這些功能的組合(例如,父母,父母,孩子)來選擇您想要的元素。

e.g:

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

你可以用按鈕點擊事件開始

+0

看起來像這個shd工作,但jgGrid插件添加了一堆嵌套原始表元素深層的新元素。 prev只能立即返回前面的兄弟姐妹 – 2012-04-11 05:14:54

+0

是否在原始表格和按鈕之間插入

?否則應該使用$(this).prev('table.myGridClass') – 2012-04-12 17:26:50

0

附加一個單擊處理程序到父,用於輸入,然後找到兄弟表。

$(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'); 
}); 
0
 $('div.DataContent :input[value="Choose Columns"]').click(function() { 
      $(this).parent().find('.myGridClass').jqGrid('columnChooser'); 
     }); 

使用.find代替提交遍歷比第一電平(的jqGrid嵌套原來的表元素深)也採用了更具體的選擇」 .myGridClass',而不是在更深的答案之一。兒童'表',因爲jqGrid添加了幾個其他表元素,使用'表'不返回原來的意圖

相關問題