jQuery infinite loop through each div

jquery each element
jquery each json array
jquery array of objects
jquery each break
jquery create array in each loop
jquery find each
jquery each li
jquery each count

I have some divs with divs in them, which I want to loop through while removing a class from the current one, then adding a class to the next one.

Then when I reach the last one, I want to go back to the start and do it all over again.

I already have a way of doing this, but it only works for one set of divs, I'm going to be having many sets of divs that need to loop independently.

Here's an example few sets (there would be a random amount of divs in each):

<div class="set">
    <div class="current">Item1</div>
    <div>Item2</div>
    <div>Item3</div>
</div>


<div class="set">
    <div class="current">Item1</div>
    <div>Item2</div>
    <div>Item3</div>
    <div>Item4</div>
    <div>Item5</div>
</div>

I need to remove that current class, and add it to the next div in each set, and so on.

Here is the code I have that works with one set:

$(function() {
    var items = $('.set div').length;
        current = 0;

    setInterval(function() {
        $('.set div').eq(current).removeClass('current');

        if (current == items - 1){
            current = 0;
        } else {
            current++;
        }

        $('.set div').eq(current).addClass('current');
    }, 500);
});

my take:

http://jsfiddle.net/yyY28/

$('.set').each(function(){
    (function($set){
        setInterval(function(){
            var $cur = $set.find('.current').removeClass('current');
            var $next = $cur.next().length?$cur.next():$set.children().eq(0);
            $next.addClass('current');
        },1000);
    })($(this));

});​

version 2:

​setInterval(function(){
    $('.set').each(function(){
        var $cur = $(this).find('.current').removeClass('current');
        var $next = $cur.next().length?$cur.next():$(this).children().eq(0);
        $next.addClass('current');
    });
},1000);​

.each(), divs, I'm going to be having many sets of divs that need to loop independently. Here's an example few sets (there would be a random amount of divs in each): jQuery’s each() function is used to loop through each element of the target jQuery object — an object that contains one or more DOM elements, and exposes all jQuery functions. It’s very useful for

Maybe I didn't get you right, but is that you are looking for?

function loop() {
    $(".set").each(function() {
        var current = $(this).children(".current").removeClass("current");
        var i = current.next().length ? current.index() : 0;
        current.siblings(":eq(" + i + ")").addClass("current");
    });
}

setInterval(loop, 500);​

DEMO: http://jsfiddle.net/jGcsh/

jQuery Each: 7 Coding Examples that you can't miss as a Developer, Description: Iterate over a jQuery object, executing a function for each matched element. version added: 1.0.each( function ). function. Type: Function( Integer index  Lemniscate.js is a jQuery infinite scroll plugin for creating infinite-looping web content that automatically scrolls to the top when you reach the bottom of the page. How to use it: 1.

try this one:

function changeCurrent(){
    $('.set').each(function(){
        var currentSubDiv = $(this).children('.current');
        currentSubDiv.removeClass('current');
        currentSubDiv.next().addClass('current');
    })
}

setInterval(changeCurrent,timeInMillis);

jquery loop through li elements Code Example, each() function is used to iterate over each element of an Object, array like Objects and arrays. It can also be used to loop over DOM elements. There are different ways to loop over arrays in JavaScript, but it can be difficult choosing the right one. Plus keeping each method straight can drive a developer nuts. There is a classic JavaScript for loop, JavaScript forEach method and a collection of libraries with forEach and each helper methods.

Master the art of looping in JavaScript with these incredible tricks, Get code examples like "jquery loop through li elements" instantly right from your google //looping through list elements in jquery. 2 append item to array javascript · append new element for each value in array d3.js index of with var · javascript indexof · javascript infinite loop · javascript inherit function  hey guys, i got a problem with my Jquery script. Would appriciate it if you could help me out . I add a Jquery carousel, but it'll cause a infinite loop

infinite loop in jQuery - JSFiddle, In the below code, I am looping through all the numbers in an array, and printing called jQuery Each method which helps you loop through arrays, objects, Looping through an HTML table element Note: Infinite loops can hang the browser so it is required to run the loop at a gap of a few milliseconds. If the new slide's index is less than zero then the user has paged left beyond slide 1 and so the ul element's margin-left property is set so the last slide is visible. Else if the new slide's index is greater or equal to the number of slides (3) then the user has paged right beyond slide 3 and so the left-margin is set so the first slide is

PHP Loops, <div id="mydiv">. 2. </div>. 3. ​. 4. <p id="test">. 5. Hi welcome!! 6. </p>. JavaScript + jQuery 2.2.1 Tidy. xxxxxxxxxx. 21. 1. var width = $(document).width()​  I removed the loop completely and it appears to have the correct offset of the container div without looping through each of its containers which suggests jQuery's offset provides the total left/top offset.

Comments
  • posting your current jquery code could help, if you already have a method for doing it to one set of divs using each() for all divs of class "set" should solve the problem, or am I mistaken?
  • would all parent divs have class="set"? and when you say that you'll have "many sets of divs that need to loop independently" are you saying that while all sets have a parent div with class="set", the number of sets n to work on would be anywhere from 1 to n?
  • That works perfectly, and it's actually less code than my original. Amazing! Thanks!
  • You assign each .set a new setInterval, so in couple of minutes the sets will run out of synchronous work.
  • @VisioN good point. I added a second version which can't run out of sync and is more elegant as well. edit: oh it's almost exactly your version now :P