nextAll() - 多个列表遍历

Posted 2023-02-25

【中文标题】nextAll() - 多个列表遍历

【英文标题】：nextAll() - Multiple list traversal

【发布时间】：2012-02-10 17:28:48

【问题描述】：

我有三个列表。 当我单击下一步时，我想获得下一个 li，这很好，但是当我到达第一个列表的末尾时，我希望下一个成为第二个列表的第一个。我会尝试更好地解释一下。

<ul class='list'>
   <li image_id="1"></li>
   <li image_id="2"></li>
</ul>

<ul class='list'>
   <li image_id="3"></li>
   <li image_id="4"></li>
</ul>

<ul class='list'>
   <li image_id="5"></li>
   <li image_id="6"></li>
</ul>

所以我有三个列表..接下来我想知道我有多少里所以我写了..

var how_many $('ul.list li').length;

这很好，它带回了所有 6 li's..

接下来我想找到一个 li，如果它有当前的图像 id。

var which = $('ul.list li[image_id^="' +  image_id +'"]');

此时一切正常。

所以现在我要查找下一个 li 的图像 id 是什么..

var found_next = which.nextAll('ul.list li').attr('image_id');

这也有效..

然后我使用 .load 加载新图像，该 .load 具有更新当前 image_id 的回调...

“问题”是单击时，next..next..next 等，我到最后说第一个列表 jquery 带回“未定义”而不是第二个列表的第一个 li。有人有什么建议吗？

任何帮助将不胜感激。

【问题讨论】：

发生这些问题时的首选 -> api.jquery.com/nextAll

【参考方案1】：

.nextAll 仅适用于兄弟姐妹。如果要跳转到下一个<li>，则必须选择所有元素，并使用.index和.eq()选择下一个<li>。

var $li = $('ul.list li');
// Example, inside an event listener:
    var index = $(this).index($li);
    var nextElement = $li.eq( index + 1 );

【讨论】：

可能与.index()结合使用。

谢谢我刚刚查找了 .index.. 谢谢 - 如果成功将编辑。

@smoop 你必须非常仔细地阅读index。它有多种口味（如您在the documentation 中所见）。 PS。您可能还会发现 this answer 很有用。

效果很好，感谢您的时间和回答 - 非常感谢。

【参考方案2】：

不确定您是否已经弄清楚了。如果没有，你可以试试：

var $li = $('ul.list li'), i = 0, $currentLi;

$('button').click(function()
    if(i < $li.length) 
        $currentLi = $li.eq(i); //eq(i) returns a jQuery object where i is the zero-based index
        i++
    else 
        alert('End of LIs');
    
);

这是一个有效的Demo

【讨论】：

这是一个非常优雅的解决方案，谢谢，我也会研究一下。感谢您的宝贵时间。