Javascript 在拆分列表上使用jQuery.nextUntil（）

是否可以让.nextUntil（）在拆分列表上工作，或者获得相同的功能

---

因此，我正在尝试为我的项目实现非常流行的shift select，因为它们在我的应用程序中是按列表排序的，所以我希望能够跨

边界进行选择

我有以下一组DOM元素：

首先
第二步
第三
第四项


第五
第六项
第七

用这样的方法：

$（'li.clicked'）.nextUntil（'li.selected'）；

我想要一个包含以下元素的列表

第三个， 第四个， 第五

---

然而，我得到的只是导致拆分的元素。有没有办法做到这一点？我还尝试先用

$（'.item'）

选择所有项目，然后在它们上使用

.nextUntil（）

，但没有任何运气

这就是你要找的吗

$('li').slice($('li').index($('.clicked'))+1,$('li').index($('.selected')));

供参考

编辑

所以如果你这样做了

$('li')

您将获得一个包含所有元素“li”的数组，其中包括：

[<li class=​"item">​first​</li>​, 
<li class=​"item clicked">​second​</li>​, 
<li class=​"item">​third​</li>​, 
<li class=​"item">​fourth​</li>​, 
<li class=​"item">​fifth​</li>​, 
<li class=​"item selected">​sixth​</li>​, 
<li class=​"item">​seventh​</li>​]

为了获得更好的性能，您应该在创建一个包含所有li的数组之前，让它不会在所有dom中搜索3次“li”数组

var array = $('li');
var subarray = array.slice(array.index($('.clicked'))+1,array.index($('.selected')));

---

假设无法将这些列表合并为一个列表，则不可能使用

nextUntil

方法。这是因为jQuery执行遍历的方式。根据文件,

获取每个元素的所有后续同级，直到但不包括通过选择器、DOM节点或jQuery对象匹配的元素

fifth

不是单击的

元素的同级，而是元素父元素同级的子元素

我想出了两个可能的解决办法

解决方案1：合并下一次和上一次遍历

假设
.clicked
始终在第一个列表中，而
.selected
始终在第二个列表中，那么将
prevAll（）
与
nextAll（）
组合应该可以实现这一目的。这假定顺序相同

var siblings = $("li.clicked").nextAll()

在元素本身之后获取当前元素的所有同级

var distantSiblings = $("li.selected").prevAll();

获取第一个元素之后但第二个元素之前的所有远亲

siblings.push(distantSiblings);

将它们组合成两个元素，然后迭代每个元素


var兄弟姐妹=$（“li.clicked”）.nextAll（）
var distantsides=$（“li.selected”）.prevAll（）；
兄弟姐妹。推（远兄弟姐妹）；
兄弟。每个（函数（）{
$（此）.addClass（“蓝色”）；
});
.blue{color:blue；}


首先
第二步
第三
第四项


第五
第六项
第七
您可以通过一次选择所有这些项目并使用循环来手动完成

考虑父元素，比如“container”：

并对其进行迭代：

var $items = $(".item"), $result = $(), found = false;

for (var i = 0; i < $items.length; i++)
{
    $currentItem = $items.eq(i);

    if ($currentItem.is('.clicked')) {
        found = true;
        continue;
    }

    if ($currentItem.is('.selected'))
        break;

    if (found)
      $result = $result.add($currentItem);
}

console.log($result);

var$items=$（“.item”），$result=$（），found=false；
对于（变量i=0；i<$items.length；i++）
{
$currentItem=$items.eq（i）；
如果（$currentItem.is（'.clicked'））{
发现=真；
继续；
}
如果（$currentItem.is（'.selected'））
打破
如果（找到）
$result=$result.add（$currentItem）；
}
console.log（$result）；

这就是工作。
在任何情况下，您都需要定义li组

我认为最简单的方法是创建一个函数，获取lis列表，您可以以任何方式请求，然后过滤您感兴趣的el


函数范围（椭圆、开始、结束）{
//我们不直接使用indexOf，因为elList可能是一个节点列表
//而不是数组。
var startI=[].indexOf.call（elList，start）；
var endI=[].indexOf.call（elList，end）；
return[].slice.call（elList、startI、endI+1）；
}
//请求可选择的*有序*元素组
var liList=document.querySelectorAll（'ul.current>li，ul.later>li'）；
var selectionEnd=document.querySelector（'.selected'）；
[]forEach.call（liList，函数（li）{
li.addEventListener（'click'，function（））{
所选变量=elRange（liList、li、SELECTIONND）；
选定。forEach（功能（el）{
el.classList.add（'red'）；
})
});
});
。已选定{
颜色：蓝色；
}
瑞德先生{
颜色：红色；
}

首先
第二个
第三
第四项


第五
第六项
第七
点击的按钮是否总是在当前的
菜单中？在“以后的”ul中选择了
？不，我想不是。恐怕用户可以按任何顺序选择项目。哇，这很有效！现在我只需要理解它。：）太好了，我要了+1用于澄清
.nextUntil（）
函数。我最终得到了一个与你的第二个选择非常相似的解决方案。但我首先在另一个答案中看到了这一点。谢谢你，伙计！
<div id="container">
  <ul class="current">
    <li class="item">first</li>
    <li class="item clicked">second</li>
    <li class="item">third</li>
    <li class="item">fourth</li>
  </ul>
  <ul class="later">
    <li class="item">fifth</li>
    <li class="item selected">sixth</li>
    <li class="item">seventh</li>
  </ul>
</div>

var $items = $("#container > ul > li.item"); // or simply $("#container .item");

var $items = $(".item"), $result = $(), found = false;

for (var i = 0; i < $items.length; i++)
{
    $currentItem = $items.eq(i);

    if ($currentItem.is('.clicked')) {
        found = true;
        continue;
    }

    if ($currentItem.is('.selected'))
        break;

    if (found)
      $result = $result.add($currentItem);
}

console.log($result);