Как перебрать братьев и сестер с помощью 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 я предпочел $selected.parent().children() над эквивалентом $selected.siblings().add($selected) по вкусу - возможности практически безграничны.

Answer 2

Вы можете попробовать это

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 за каждый клик, а когда он достигнет конца (длина div s), он будет сброшен.

Answer 3

как насчет этого.

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

В старом добром искусстве ИИ вы пытаетесь сделать поступок (addClass), если он работал (длина <> 0), больше ничего не делать, в противном случае вы попробуйте сновапервый из братьев и сестер.

Answer 4

Один простой способ заключается в следующем:

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