1

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

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

4

3 回答 3

5

根据 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')匹配第一个 previous .cat，nextUntil('.cat')获取其所有子类别，并且addBack（或andSelf在旧版本中）将该.cat元素添加回匹配元素集。

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

参考

于 2013-06-13T08:21:43.577 回答
1

这将根据您对类别和潜艇的请求（更新）解决您的问题（不是错误的）

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

用于单击潜艇或猫并选择它周围的其他潜艇及其类别

于 2013-06-13T08:30:39.993 回答
0

使用 jQuery.nextUntil

$('li.cat').on('click', function() {
   $(this).nextUntil('.cat');
   /* then write you logic here */
});
于 2013-06-13T08:25:46.250 回答