如何在具有 ID 的其他行之间查找行然后添加类

Question

我被我的桌子困住了。我需要创建切换行功能，但我不知道如何在表中查找子行。有人可以帮我吗？

1. 我有很多行 > 500 的表格
2. 所有行都有 class="row-1,row-2.....row-600 etc"
3. 并且所有主行也有 class="parent"

在每个“父”行之间我有 6 行， 所以我需要切换/折叠目的找到父行之间的所有（子）行。并添加具有 id 的类，如上一个父行。

例如：
父级有 class="row-1 父级"
所有子必须有 - class="child-row-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

在 jQuery 中有一个 nextUntil 方法用于遍历树。实际上有很多方法可以用来遍历树，你可以通过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);
    }
});