nextAll()-遍历多个列表 [英] nextAll() - Multiple list traversal

查看:110
本文介绍了nextAll()-遍历多个列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有三个清单. 当我单击下一步"时,我想获得下一个li,这很好,但是当我到达第一个列表的末尾时,我希望下一个成为第二个列表的第一个.

I have three lists. When I click next I want to get the next li, which is fine but when I reach the end of the first list I would like the next to be the first of the second list.. I'll try and explain a little better.

<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>

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

So I have three lists.. next I want to know how many li's I have so I wrote..

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

这很好,它带回了所有6 li的食物.

this is good, it's bringing back all 6 li's..

接下来,我想找到一个li,如果它当前具有图像ID im.

next I want to find a li if it has the image id im currently on.

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

目前一切正常.

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

so now Im going to find what the next li's image id is..

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

这也可以.

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

I then load the new image in using a .load that has a callback that updates the current image_id...

问题"是单击时,单击下一个..next..next等,然后说到第一个列表jquery会带回"undefined",而不是第二个列表的第一个li.有人有任何建议吗?

The "PROBLEM" is when click, next..next..next etc and I get to the end of say the first list jquery brings back "undefined" not the first li of the second list. has anyone got any suggestions?

任何帮助将不胜感激.

推荐答案

.nextAll 仅适用为兄弟姐妹.如果要跳到下一个<li>,则必须选择所有元素,然后使用 .index .eq() 来选择下一个<li>.

.nextAll only works for siblings. If you want to jump to the next <li>, you have to select all elements, and use .index and .eq() to select the next <li>.

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

这篇关于nextAll()-遍历多个列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆