如何在其他行之间查找行w/ID然后添加类

Question

我被我的桌子卡住了。我需要创建切换行函数，但是我不知道如何在表中找到子行。有人能帮我吗？

1. 我有很多行> 500行的表
2. 所有行都有class=“行-1，行-2.行-600等”。
3. 而且所有主行都有class=“父”。

在每个“父”行之间，我有6行，因此为了切换/折叠目的，需要查找父行之间的所有(子)行。并添加具有id的类，类似于前面的父行。

例如：

父母有class=“行-1父”

所有子程序必须有-class=“子行-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方法。实际上，有很多方法可以用来遍历树，您可以了解更多关于它们的这里。

要对所有行执行此操作，请执行以下操作：

1. 选择每个父行$('.parent').each(..)
2. 查找类名(row-nn)
3. 将类(child-row-nn)添加到下一行，直到下一个.parent。

关于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);
    }
});