Обратные строки таблицы с JQuery, не касаясь строк заголовка

Question

У меня есть следующая структура HTML-таблицы. Мне нужно изменить порядок строк таблицы после каждой строки заголовка. Строки заголовка должны оставаться неповрежденными.

<tbody> 
 
    <tr><td colspan="4">Header</td></tr> 
 
    <tr class="content">content 4</tr> 
 
    <tr class="content">content 3</tr> 
 
    <tr class="content">content 2</tr> 
 
    <tr class="content">content 1</tr> 
 
    <tr><td colspan="4">Header 2</td></tr> 
 
    <tr class="content">content 2</tr> 
 
    <tr class="content">content 1</tr> 
 
    <tr><td colspan="4">Header 3</td></tr> 
 
    <tr class="content">content 2</tr> 
 
    <tr class="content">content 1</tr> 
 
</tbody>

Я попытался следующий код, чтобы полностью изменить строки:

$("tbody").each(function(elem,index) { 
var arr = $.makeArray($(".content",this).detach()); 
arr.reverse(); 
$(this).append(arr); 

});

Но это перепутало мои строки заголовков.

Я первоначально пытался вставить строки с помощью

JQuery.after()

Но вставить строки в обратном порядке, чем я хотел. Любые идеи, что еще можно сделать здесь?

Answer 1

Во-первых, ваш HTML недопустим. Элементы .contenttr должны иметь td, обертывая содержимое. Во-вторых, если вы добавите класс в заголовок tr элементов, вы можете перебрать их и использовать nextUntil(), чтобы найти tr элементов между ними. Наконец, вы можете отменить порядок tr под заголовком, перейдя по ним и добавив их непосредственно после текущего заголовка tr. Попробуйте это:

$('tr.header').each(function() { 
 
    var $header = $(this); 
 
    $(this).nextUntil('.header').each(function() { 
 
    $(this).insertAfter($header); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr class="header"> 
 
     <td colspan="4">Header</td> 
 
    </tr> 
 
    <tr class="content"> 
 
     <td>content 4 
 
     <td> 
 
    </tr> 
 
    <tr class="content"> 
 
     <td>content 3 
 
     <td> 
 
    </tr> 
 
    <tr class="content"> 
 
     <td>content 2 
 
     <td> 
 
    </tr> 
 
    <tr class="content"> 
 
     <td>content 1 
 
     <td> 
 
    </tr> 
 
    <tr class="header"> 
 
     <td colspan="4">Header 2</td> 
 
    </tr> 
 
    <tr class="content"> 
 
     <td>content 2 
 
     <td> 
 
    </tr> 
 
    <tr class="content"> 
 
     <td>content 1 
 
     <td> 
 
    </tr> 
 
    <tr class="header"> 
 
     <td colspan="4">Header 3</td> 
 
    </tr> 
 
    <tr class="content"> 
 
     <td>content 2 
 
     <td> 
 
    </tr> 
 
    <tr class="content"> 
 
     <td>content 1 
 
     <td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Как я уже говорил выше, это только изменяет порядок элементов. Если вам необходимо заказать их, вы можете изменить второй цикл на свою собственную реализацию sort(), если требуется.