I'm currently trying to loop through sibling elements but can't get the loop to go back to the first sibling.

I'm using the nextOrFirst function as seen here

I've replicated what i'm trying to achieve in this fiddle

HTML

<div id="stories">
  <div class="swapper"><p>number 1</p></div>
  <div class="swapper"><p>number 2</p></div>
  <div class="swapper"><p>number 3</p></div>
</div>

Javascript

$(document).ready(function() { 

$.fn.nextOrFirst = function(selector) {
    var next = this.next(selector);
    return (next.length) ? next : this.prevAll(selector).last();
};

setInterval(

    function swap() {

        $(".swapper").each(function() {

            var nextItem = $(this).nextOrFirst();

            $(this).html($(nextItem).html());

            return;

        });

    }, 5000);

});

I'm currently trying to loop through sibling elements but can't get the loop to go back to the first sibling.

I'm using the nextOrFirst function as seen here

I've replicated what i'm trying to achieve in this fiddle

HTML

<div id="stories">
  <div class="swapper"><p>number 1</p></div>
  <div class="swapper"><p>number 2</p></div>
  <div class="swapper"><p>number 3</p></div>
</div>

Javascript

$(document).ready(function() { 

$.fn.nextOrFirst = function(selector) {
    var next = this.next(selector);
    return (next.length) ? next : this.prevAll(selector).last();
};

setInterval(

    function swap() {

        $(".swapper").each(function() {

            var nextItem = $(this).nextOrFirst();

            $(this).html($(nextItem).html());

            return;

        });

    }, 5000);

});

• javascript
• html
• jquery
• loops
• jquery-selectors

• the code works fine, its selecting the first element when it doesn't find the next, so perfectly lastOrFirst, problem is with the logic – Govind Singh Commented Jul 9, 2014 at 10:31

5 Answers 5

Why not just move last element to the top and than remove last one

setInterval(

    function swap() {
        var $container = $("#stories");
        $container.prepend($container.find('.swapper:last').html());// move last to top
        $container.find('.swapper:last').remove(); // remove last
    }, 2000);

I guess you trying to reach something like this: jsfiddle

I think this is working correctly (but perhaps not as you envisaged). In the first iteration of the .each() function

• the first element is set to "number 2" (the value of the second element)
• then the second element is set to "number 3" (the value of the third element)
• finally the third element is set to "number 2" which is now the value of the first element

You can keep same code just replace this line

$(this).html($(nextItem).html());

with this

$(this).insertBefore($(nextItem));

Here's a very simple way. Instead of setting the HTML properties of the current item to the next item, just use insertAfter like this:

http://jsfiddle/jgk8B/5/

$(document).ready(function() { 

    $.fn.nextOrFirst = function(selector) {
        var next = this.next(selector);
        return (next.length) ? next : this.prevAll(selector).last();
    };

    setInterval(

        function swap() {

            $(".swapper").each(function() {

                $($(this).nextOrFirst()).insertAfter($(this));

                return;

            });

    }, 500);
});

It is fine to your method nextOrFirst(), but when you call the loop each, there is sth. wrong.

At the first time you get the nextItem, you change the text of the first element into number 2. So you can just get number 2 when the 3th time you get the first element as nextItem, and your html will show:

number 2
number 3
number 2  

That's why your loop can't go back to the first: it's fine to your nextOrFirst, but wrong with your each.

Thanks, Edison