如何使用jQuery循环通过兄弟姐妹？答案

【问题标题】：How to cycle through siblings using jQuery?如何使用jQuery循环通过兄弟姐妹？
【发布时间】：2011-11-16 21:25:30
【问题描述】：

我有以下代码：

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/

【问题讨论】：

标签： javascript jquery next siblings

【解决方案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");
});

这种方法的动机有两个：

当您想无限期地循环遍历一个集合时，会想到取模
摆脱if 使代码看起来更智能

在设置divs 的值时，出于个人喜好，我更喜欢$selected.parent().children() 而不是等价的$selected.siblings().add($selected)——实际上有无限可能。

【讨论】：

天啊，我怎么能忘记模数？！那个小操作员总是让我惊讶。为这样一个优雅的解决方案 +1！

【解决方案2】：

一个简单的方法是这样的：

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

【讨论】：

【解决方案3】：

这个怎么样。

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

以旧的良好 AI 方式，您尝试执行操作 (addClass)，如果它有效 (length 0) 则无需再做任何事情，否则您再次尝试第一个兄弟姐妹。

【讨论】：

【解决方案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;   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="selected">A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
</div>

<button id="next">next!</button>

您只需为每次点击增加i，当它到达末尾（divs 长度）时，它将被重置。

【讨论】：