javascript - jQuery.next() - 为什么它会跳过包含条件？

Question

我有一份正在做的 list .nextUntil(':contains("2010")') 上。当对 .nextUntil() 设置的变量调用 .next() 时，显然 jQuery 会跳过初始 :contains() 条件。

为什么会发生这种情况？这是一个错误还是我遗漏了什么？

<nav class="timeLineNav">
    <ul>
        <li class="selected is-loaded"><a href="#year2014">2014</a></li>
        <li class="is-loaded"><a href="#year2013">2013</a></li>
        <li class=""><a href="#year2012">2012</a></li>
        <li class=""><a href="#year2011">2011</a></li>
        <li class=""><a href="#year2010">2010</a></li>
    </ul>
</nav>

这是 JavaScript 代码:

var list = $('.timeLineNav ul li');

var nextUntil = list.nextUntil(':contains("2010")');
nextUntil.each(function (n, v) {
    $('#length').append('<li>' + $(v).text() + ' ' + '</li>');
});

var next = nextUntil.next();

next.each(function (n, v) {
    $('#nextLength').append('<li>' + $(v).text() + ' ' + '</li>');
});

这是一个带有完整示例的 fiddle http://jsfiddle.net/klingan/bwmx6Lbr/

Answer 1

http://jsfiddle.net/bzehqy16/3/

我认为这就是你想要的，而不是在每个 jQuery 对象上使用 .add() 并找到对象的 .last() 来实现 next()

var list = $('.timeLineNav ul li');

var nextUntil = list.nextUntil(':contains("60-tal")');
nextUntil.each(function(n, v) {
    $('#length').append('<li>' + $(v).text() + ' ' + '</li>');
});

var next = nextUntil.add(nextUntil.last());

next.each(function(n, v) {
    $('#nextLength').append('<li>' + $(v).text() + ' ' + '</li>');
});

body{
    background-color:lightgrey;
}

ul.length li{
    display:inline;
    padding:100;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<nav class="timeLineNav">
  <ul>
    <li class="selected is-loaded"><a href="#year2014">2014</a></li>
    <li class="is-loaded"><a href="#year2013">2013</a></li>
    <li class=""><a href="#year2012">2012</a></li>
    <li class=""><a href="#year2011">2011</a></li>
    <li class=""><a href="#year2010">2010</a></li>
    <li class=""><a href="#year2009">2009</a></li>
    <li class=""><a href="#year2008">2008</a></li>
    <li class=""><a href="#year2007">2007</a></li>
    <li class=""><a href="#year2006">2006</a></li>
    <li class=""><a href="#year2005">2005</a></li>
    <li class=""><a href="#year2004">2004</a></li>
    <li class=""><a href="#year2003">2003</a></li>
    <li class=""><a href="#year2002">2002</a></li>
    <li class=""><a href="#year2001">2001</a></li>
    <li class=""><a href="#year2000">2000</a></li>
    <li class=""><a href="#year90-tal">90-tal</a></li>
    <li class=""><a href="#year80-tal">80-tal</a></li>
    <li class=""><a href="#year70-tal">70-tal</a></li>
    <li class=""><a href="#year60-tal">60-tal</a></li>
  </ul>
</nav>
<ul class="length" id="length"></ul>
<ul style="color:red;" class="length" id="nextLength"></ul>