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

Question

I have the folowing code:

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");
});

What i want is loop through the divs in the container. I can do this to cycle:

$("#next").click(function() {
    if ($(".selected").next().length == 0) {
        $(".selected").removeClass("selected").siblings(":nth-child(1)").addClass("selected");
    }
    else {
        $(".selected").removeClass("selected").next().addClass("selected");
    }
});

But i think there is a simpler way. How can i make it simpler ? (I don't mind if you don't use the next() function).

jsFiddle: http://jsfiddle.net/S28uC/

Answer 1

I 'd prefer siblings.first() instead of siblings(":nth-child(1)") , but in essence you won't be able to wrap around without using some variant of next().length .

Update: If I were writing this from scratch, this is how I 'd do it:

$("#next").click(function() {
    var $selected = $(".selected").removeClass("selected");
    var divs = $selected.parent().children();
    divs.eq((divs.index($selected) + 1) % divs.length).addClass("selected");
});

This approach is motivated by two factors:

1. When you want to cycle over a collection indefinitely, modulo comes to mind
2. Getting rid of the if makes for smarter-looking code

When setting the value of divs I preferred $selected.parent().children() over the equivalent $selected.siblings().add($selected) as a matter of taste -- there are practically endless possibilities.

Answer 2

how about this.

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

In old good AI manner you try to do the deed (addClass), if it worked (length <> 0) nothing more to do, otherwise you try again on the first of the siblings.

Answer 3

You can try this

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>

simply you will increase i for each click and when it reach the end ( div s length ) it will be reset.

Answer 4

一种简单的方法是：

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