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

Question

我有以下代码:

HTML:

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

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我将I 的值设置为$selected.parent().children()等同$selected.siblings().add($selected)于品味的时候 - 实际上有无穷无尽的可能性.