按類別隱藏多個錶行

我有一張相當大的公司表，這些公司可以有一個女兒，這些都列在他們的下面。我希望能夠切換每個公司的女兒的每個「部分」。按類別隱藏多個錶行

如果公司有女兒，我添加了<span class="image">到每個<td>顯示圖像。如果你點擊圖片，女兒的行將被切換。

的佈局設計是這樣的：

<tr> 
    <td><span class="image"></span> 
    <td>Company</td> 
</tr> 
<tr class="company_daughter"><td>!data</td></tr> 
<tr class="company_daughter"><td>!data</td></tr> 
<tr class="company_daughter"><td>!data</td></tr> 
<tr class="company_daughter"><td>!data</td></tr> 
<tr><td>Company</td></tr> 
<tr><td>Company</td></tr> 
<tr><td>Company</td></tr> 
<tr> 
    <td><span class="image"></span> 
    <td>Company</td> 
</tr> 
<tr class="company_daughter"><td>!data</td></tr> 
<tr class="company_daughter"><td>!data</td></tr> 
<tr class="company_daughter"><td>!data</td></tr> 
<tr class="company_daughter"><td>!data</td></tr> 

etc

到目前爲止，我想出了這一點：

$('.image').click(function(){ 
    var closest = $(this).closest('tr') 
    $('tr.company_daughter').each(function(){ 
      closest.hide(); 
     } 
    ); 
});

每個公司只顯示她自己的女兒

但是我似乎沒有能夠正確地得到'部分'問題。

來源

2013-06-19 Brainscrewer

聽起來就像你想使用'nextUntil（）' – tymeJV

你能夠改變HTML或你堅持使用它嗎？你可以給每個公司添加一個'data-companyid'屬性，並且爲每個女兒添加一個'data-parent-companyid'？這會讓你的選擇更容易。 –

@orzechowskid我可以補充一點。 – Brainscrewer

下面的代碼應該是你想要的;

$('.image').click(function(){ 
    // get the clicked company row 
    var closest = $(this).closest('tr'); 
    //give main company class "company" 
    closest.nextUntil("tr.company").each(function(){ 
      //Every this means tr.company_daughter 
      $(this).toggle(); 
     } 
    ); 
});

來源

2013-06-19 14:27:20

這就像一個魅力，非常感謝！ – Brainscrewer

我相信這會工作，它會隱藏所有company_daughter是.image已被點擊後：

$(".image").click(function() { 
    $(this).closest("tr").nextUntil("tr:not(.company_daughter)").toggle(); 
});

演示：http://jsfiddle.net/Rj5Ac/2/

來源

2013-06-19 14:26:46 tymeJV

我建議，雖然目前未經測試：

$('.image').click(function(){ 
    $(this).closest('tr').nextUntil('tr:has(".image")').toggle(); 
});

參考文獻：

來源

2013-06-19 14:27:09

按類別隱藏多個錶行

回答

相關問題