如何在其他行之間找到帶有ID的行然後添加類

Question

我被卡在桌子上了。我需要創建切換行功能，但我不知道如何在表中查找子行。有人能幫我嗎？

1. 我有表有許多行> 500個
2. 所有行類=「行1，行2 .....行600等」
3. 和所有主要行也有類=「parent」

在每個「父」行之間，我有6行， 因此我需要切換/摺疊目的查找父行之間的所有（子）行。並像以前的父行一樣添加id類。

例如：
父有類= 「行1父」
所有子必須有 - 類= 「孩子行-1」

默認表

<table id="table"> 
    <tr class="row-1 odd parent"> 
     <th class="column-1">st. 3 - 5</th> 
     <th class="column-2">Profile</th> 
     <th class="column-3">Purpose</th> 
    </tr> 
    <tr class="row-2 even"> 
     <td class="column-1">Metal Stamp</td> 
     <td class="column-2">Width</td> 
     <td class="column-3">Price</td> 
    </tr> 
    <tr class="row-3 odd"> 
     <td class="column-1">Circle 3 - 5</td> 
     <td class="column-2">28-110</td> 
     <td class="column-3">21500</td> 
    </tr> 
    <tr class="row-4 even"> 
     <td class="column-1">Circle 3 - 5</td> 
     <td class="column-2">115-180</td> 
     <td class="column-3">20700</td> 
    </tr> 
    <tr class="row-5 odd"> 
     <td class="column-1">Cube 3 - 5</td> 
     <td class="column-2">63-80</td> 
     <td class="column-3">21500</td> 
    </tr> 
    <tr class="row-6 even"> 
     <td class="column-1">Cube 3 - 5</td> 
     <td class="column-2">100-220</td> 
     <td class="column-3">20700</td> 
    </tr> 
    <tr class="row-7 odd"> 
     <td class="column-1">Line 3 - 5</td> 
     <td class="column-2">10-50 х 40-200</td> 
     <td class="column-3">27000</td> 
    </tr> 
</table> 

最後它應該看起來像這樣：

<table id="table"> 
    <tr class="row-1 odd parent"> 
     <th class="column-1">st. 3 - 5</th> 
     <th class="column-2">Profile</th> 
     <th class="column-3">Purpose</th> 
    </tr> 
    <tr class="row-2 even child-row-1"> 
     <td class="column-1">Metal Stamp</td> 
     <td class="column-2">Width</td> 
     <td class="column-3">Price</td> 
    </tr> 
    <tr class="row-3 odd child-row-1"> 
     <td class="column-1">Circle 3 - 5</td> 
     <td class="column-2">28-110</td> 
     <td class="column-3">21500</td> 
    </tr> 
    <tr class="row-4 even child-row-1"> 
     <td class="column-1">Circle 3 - 5</td> 
     <td class="column-2">115-180</td> 
     <td class="column-3">20700</td> 
    </tr> 
    <tr class="row-5 odd child-row-1"> 
     <td class="column-1">Cube 3 - 5</td> 
     <td class="column-2">63-80</td> 
     <td class="column-3">21500</td> 
    </tr> 
    <tr class="row-6 even child-row-1"> 
     <td class="column-1">Cube 3 - 5</td> 
     <td class="column-2">100-220</td> 
     <td class="column-3">20700</td> 
    </tr> 
    <tr class="row-7 odd child-row-1"> 
     <td class="column-1">Line 3 - 5</td> 
     <td class="column-2">10-50 х 40-200</td> 
     <td class="column-3">27000</td> 
    </tr> 
</table> 

Answer 1

有一個nextUntil用於遍歷樹的jQuery方法。其實有很多方法可以用來遍歷樹，你可以學到更多關於它們的方法here。

要爲所有的行做到這一點：

1. 選擇每個父行$('.parent').each(..)
2. 找到類名(row-nn)
3. 添加類(child-row-nn)下一行，直到下一個.parent。

Update on jsf。

$(".parent").each(function() { 
    var classes = $(this).attr('class').split(' '); 
    var matches = $.grep(classes, function(item, index) { 
     return /row-/.test(item); 
    }); 
    if(matches.length == 1) { 
     var parent = matches[0]; 
     var selector = '.' + parent; 
     var childClass = 'child-' + parent; 
     $(selector).nextUntil('.parent').addClass(childClass); 
    } 
});