如何在其他行之间找到带有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); 
    } 
});