Question

我有这个列表，我正在做 .nextUntil(':contains("2010")')开启。在.next()设置的变量上调用.nextUntil()时，显然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>');
});

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

的小提琴

Answer 1

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

我认为这是你想要的，而不是在你使用.add（）的每个jQuery对象上描绘next（）并找到对象的.last（）

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>

Answer 2

您正在列表中执行.nextUnil()，请尝试：

var item = $('.timeLineNav ul li').first();
var nextUntil = item.nextUntil(':contains("2011")');
// nextUntil should now have the li element next to <a href="#year2011">2011</a>

Answer 3

jsfiddle中的输出符合预期。使用var nextUntil = list.nextUntil(':contains("2010")');变量nextUntil具有＆＃34;集合＆＃34; {2013, 2012, 2011}

然后，对于此集合中的每个项目，您将打印下一个li：

for 2013 --> 2012,
2012 --> 2011,
2011 --> 2010.

因此jsfiddle上的第二个输出

Answer 4

根据我的理解，您期望nextUntil能够选择并包括2010年？

nextUntil实际上是按设计工作的，与您的:contains()条件无关。

我已将代码添加到您的JSFiddle以显示此内容，但这里是添加的代码：

var current = $('#start').nextUntil('.current');
var currentNext = $('#start').nextUntil('.current').next();

$('#result').html('nextUntil = ' + current.text() + '<br />nextUntil + next = ' + currentNext.text());

#result {
    background:#eee;
    border:1px solid black;
    width:500px;
    padding:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="start">Start</span><br />
<span>1</span><br />
<span>2</span><br />
<span class="current">3</span><br />
<span>4</span><br />
<span>5</span><br />
<div id="result"></div>

Answer 5

您遇到的问题是nextUntil和next都不在列表上工作。他们都搜索DOM树。

jQuery.next（） - 为什么跳过包含条件？

5 个答案: