javascript - 如何选择以前的元素，直到用 JQ 指定？

Question

我继承了带有菜单的模板，其中类别和子类别在同一范围内。这是一个例子:

<ul class="menu">
    <li class="cat" data-item-type="category"></li>
    <li data-item-type="sub-category"></li>
    <li data-item-type="sub-category"></li>
    <li data-item-type="sub-category"></li>
    <li data-item-type="sub-category"></li>
    <li class="cat" data-item-type="category"></li>
    <li data-item-type="sub-category"></li>
    <li data-item-type="sub-category"></li>
    <li data-item-type="sub-category"></li>
    <li data-item-type="sub-category"></li>
    <li class="cat" data-item-type="category"></li>
    <li class="cat" data-item-type="category"></li>
    <li data-item-type="sub-category"></li>
    <li data-item-type="sub-category"></li>
</ul>

我不能改变它的结构，但是可以给它添加额外的属性。

所以我的问题是，是否可以在单击其中一个子类别 时选择所有类别的子类别。一般来说，我需要选择所有 li 直到第一个 class="cat" 或 data-item-type="category" 出现，包括它 -类别及其所有子项。

Answer 1

根据 OP 的更新更新答案:

$('li[data-item-type="sub-category"]').click(function() {
  $(this)
     .add( $(this).nextUntil('.cat') )
     .add( $(this).prevUntil('.cat') )
     .prev('.cat').addBack() //in jQuery < 1.8, replace addBack by andSelf
     //do something
});

Demo

在评论中集思广益后，这里有一个更短的替代方案:

$('li[data-item-type="sub-category"]').click(function() {
  $(this).prevAll('.cat:first').nextUntil('.cat').addBack()//do something
});

Demo

所以 .prevAll('.cat:first') 匹配第一个前面的 .cat，nextUntil('.cat') 得到它的所有子类别和 addBack(或旧版本中的 andSelf)将 .cat 元素添加回匹配元素集。

在最新的 jQuery 版本中，.add() 和 .addBack() 方法按文档顺序对匹配的元素进行排序，因此两种替代方法都具有.cat 作为集合中的第一个元素，后跟按文档顺序排列的子类别。

---

引用

• > add
• > addBack
• > first
• > nextUntil
• > prev
• > prevUntil