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）会添加{{1}元素返回匹配元素集。

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

参考的

Answer 2

这将根据您的类别和潜艇（不是马车）的请求（更新）来解决您的问题

  $('li').click(function() {
       var x = $(this).add($(this).nextUntil('.cat')).add($(this).not('.cat').prevUntil('.cat')).andSelf().add($(this).not('.cat').prevAll('.cat:first'));
  });

单击潜艇或猫并选择其周围的其他潜水艇类别

Answer 3

使用jQuery .nextUntil

$('li.cat').on('click', function() {
   $(this).nextUntil('.cat');
   /* then write you logic here */
});

如何使用JQ指定之前选择以前的元素？

3 个答案:

参考的