如何使用jQuery循环兄弟姐妹？

我有以下代码：

HTML：

 
A
 
B
 
C
 
D
 
 next! 

jQuery的：

 $("#next").click(function() { $(".selected").removeClass("selected").next().addClass("selected"); }); 

我想要的是循环容器中的div。 我可以这样做循环：

 $("#next").click(function() { if ($(".selected").next().length == 0) { $(".selected").removeClass("selected").siblings(":nth-child(1)").addClass("selected"); } else { $(".selected").removeClass("selected").next().addClass("selected"); } }); 

但我认为有一种更简单的方法。 我怎样才能让它变得更简单？ （我不介意你不使用next()函数）。

jsFiddle： http ： //jsfiddle.net/S28uC/

Answer 1

我更喜欢siblings.first()而不是siblings(":nth-child(1)") ，但实际上，如果不使用next().length某些变体，你将无法环绕。

更新：如果我是从头开始写这个，我就是这样做的：

 $("#next").click(function() { var $selected = $(".selected").removeClass("selected"); var divs = $selected.parent().children(); divs.eq((divs.index($selected) + 1) % divs.length).addClass("selected"); }); 

这种方法有两个因素：

1. 当你想无限期地循环一个集合时，会想到模数
2. 摆脱if使得更聪明的代码

当设置divs的值时，我首选$selected.parent().children()超过等价的$selected.siblings().add($selected)作为品味 – 实际上有无穷无尽的可能性。

Answer 2

一个简单的方法是：

 $("#container").find("div:eq(0)").addClass("selected"); 

Answer 3

这个怎么样。

 ... var selected = $(".selected").removeClass("selected"); if (jQuery(selected).next().addClass("selected").length == 0 {jQuery(selected).siblings().first().addClass("selected");}; ... 

以旧的良好的AI方式，你尝试做行为（addClass），如果它工作（长度<> 0）没有更多的事要做，否则你再次尝试兄弟姐妹。

Answer 4

你可以试试这个

 var cont = $('.container'), i = 0; $("#next").on('click', function() { cont.children().removeClass('selected'); i += 1; if ( i === document.querySelectorAll('.container div').length ) { i = 0; } cont.children().eq(i).addClass('selected'); }); 

 var cont = $('.container'), i = 0; $("#next").on('click', function() { cont.children().removeClass('selected'); // increase index for each click i += 1; // reset i if it reached to last index //(hack to force next to go back to first element when we are at the end) if ( i === document.querySelectorAll('.container div').length ) { i = 0; } cont.children().eq(i).addClass('selected'); }); 

 .selected { background-color: yellow; } 

  
 
A
 
B
 
C
 
D
 
 next!