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

我继承了菜单中的类别和子类别处于同一范围的模板。这是一个例子：

<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"，包括它-类别及其所有子项。

最佳答案

根据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