JQuery Selector для выбора разделов таблицы

Question

У меня есть следующая таблица на моей странице

<table>
<tr class="evenPack">
</tr>
<tr class="evenSubPack">
</tr>
<tr class="evenSubPack">
</tr>
<tr class="evenSubPack">
</tr>
<tr class="evenSubPack">
</tr>
<tr class="oddPack">
</tr>
<tr class="oddSubPack">
</tr>
<tr class="oddSubPack">
</tr>
<tr class="oddSubPack">
</tr>
<tr class="oddSubPack">
</tr>
<tr class="evenPack">
</tr>
<tr class="evenSubPack">
</tr>
<tr class="evenSubPack">
</tr>
<tr class="evenSubPack">
</tr>
<tr class="evenSubPack">
</tr>
</table>

Строки EvenPack и строки oddPack доступны для нажатия.Когда пользователь нажимает на один из них, я хочу, чтобы непосредственные строки SubPack toggleSlide ().

например, если пользователь нажимает на первую строку, которая является четным пакетом.Тогда только четыре строки EvenSubPack, которые находятся сразу после первого EvenPack, должны переключать Slide.Он не должен переключатьSlide () строки evenSubPack, которые находятся внизу таблицы.

Я не могу думать о селекторе, чтобы сделать это.

Answer 1

nextUntil ^{[документы]} ваш друг:

$('.evenPack, .oddPack').click(function() {
    var mod = this.className.indexOf('even') > -1 ? 'odd' : 'even';
    $(this).nextUntil('.' + mod + 'Pack').slideToggle();
});

Если между .evenPack есть другие строкии .oddPack, вы можете фильтровать элементы .*SubPack, передав второй аргумент nextUntil:

$(this).nextUntil('.' + mod + 'Pack', '.' + (mod === 'even' ? 'odd' : 'even') + 'SubPack').slideToggle();

Если строки .evenPack и .oddPack всегда чередуются, вы также можете сделать:

var $elements = $('.evenPack, .oddPack')
$elements.click(function() {
    $(this).nextUntil($elements.get($elements.index(this) + 1)).slideToggle();
});

Это работает, поскольку элементы выбираются в порядке их появления в документе.Поэтому вместо поиска следующего элемента с классом evenPack или oddPack он просто берет следующий элемент в выбранном наборе.

DEMO (обратите внимание, что .slideToggle не работает должным образом со строками таблицы (они не скользят))

Answer 2

Вы можете использовать nextUntil () для этого:

$("tr").click(function() {
    var active =  $(this).attr("class").indexOf('even') > -1 ? 'odd' : 'even';
    //find if the clike in even, and find out out the next stop point will be
    $(this).nextUntil('.' + active + 'Pack').slideToggle();
});

Демо