Javascript 如何使用jQuery循环浏览同级？

我有以下代码：

html:

<div class="container">
    <div class="selected">A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
</div>
<button id="next">next!</button>

$("#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（）

函数）

---

jsiddle:

我更喜欢

兄弟姐妹。first（）

而不是

兄弟姐妹（“：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");
});

这种方法的动机有两个因素：

当您想无限期地在集合上循环时，就会想到模
去掉
if
会使代码看起来更智能
当设置
divs
的值时，我更喜欢
$selected.parent（）.children（）
而不是等效的
$selected.sides（）.add（$selected）
作为一种品味，实际上有无限的可能性。
一种简单的方法是：

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

这个怎么样

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

按照旧的良好人工智能方式，如果契约有效（长度为0），则您尝试执行契约（addClass），否则您将在第一个兄弟姐妹身上重试。
您可以尝试此操作

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；
$（“#下一步”）。在（'click'，function（）上{
cont.children（）.removeClass（'selected'）；
//增加每次单击的索引
i+=1；
//如果达到最后一个索引，则重置i
//（当我们到达终点时，黑客强制下一步返回第一个元素）
if（i==document.querySelectorAll（'.container div'）.length）{
i=0；
}
cont.children（）.eq（i）.addClass（'selected'）；
});
。已选定{
背景颜色：黄色；
}

A.
B
C
D
下一个