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（）。

例如，如果用户点击第一行，这是一个evenPack。然后只有第一个evenPack之后的四个evenSubPack行应该是toggleSlide。它不应该toggleSlide（）位于表底部的evenSubPack行。

我无法想到选择器这样做。

Answer 1

nextUntil ^[docs]是你的朋友：

$('.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();
});

jQuery选择器选择表的各个部分

2 个答案:

Demo