Как найти строки между другими строками с идентификатором и добавить класс

Question

Я застрял с моим столом.Мне нужно создать функцию переключения строк, но я не знаю, как найти подстроки в таблице.Кто-нибудь может мне помочь?

1. У меня есть таблица с несколькими строками> 500
2. Все строки имеют class = "row-1, row-2 ..... row-600 и т. Д."
3. И все основные строки также имеют class =" parent "

Между каждой" родительской "строкой у меня есть 6 строк, поэтому мне нужно для целей переключения / свертывания найти все (sub) строки между родительскими строками.и добавьте класс с идентификатором, как в предыдущей родительской строке.

Например:
parent have class = "row-1 parent"
все sub должны иметь - 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 для обхода дерева. На самом деле существует множество методов, которые вы можете использовать для обхода дерева, и вы можете узнать о них больше здесь .

Чтобы сделать это для всех строк:

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