javascript - 如何使用 jQuery 遍历 sibling ？

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 的值时，我更喜欢 $selected.parent().children() 而不是等效的 $selected.siblings().add( $selected) 视个人喜好而定——实际上有无穷无尽的可能性。