javascript – 如何使用jQuery循环兄弟姐妹?

前端之家收集整理的这篇文章主要介绍了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>

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/

解决方法

我更喜欢siblings.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使得更智能的代码

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

原文链接:https://www.f2er.com/jquery/154447.html

猜你在找的jQuery相关文章