如何使用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
});

演示

在评论中进行了一些头脑风暴之后,这里有一个更短的选择:

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

演示

因此.prevAll('.cat:first')匹配前一个.cat,nextUntil('.cat')获取其所有子类别addBack(或andSelf在旧版本中)将.cat元素添加回匹配元素集.

在最新的jQuery版本中,.add()和.addBack()方法按文档顺序对匹配的元素进行排序,因此两个备选项将.cat作为集合中的第一个元素,后跟文档顺序中的子类别.

参考

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