JavaScript jQuery while loop through divs

Question

I am trying to get this while loop to loop through a bunch of numbered divs with class numbers 1 through 4 one after another. Somewhere it is going awry. Thanks for your help!

var div = 1;
while (div < 5){
    $("." + div).fadeIn().delay(4000).fadeOut(function(){
        div++;
    });
}

div++ should be OUTSIDE of your fadeOut, but INSIDE your while-loop body, for one — Major Productions, Nov 29 '11 at 15:59
I'm not too sure you're allowed to have a class starting with a number. http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names — Filip, Nov 29 '11 at 16:01

score 2 · Answer 1 · edited May 23 '17 at 12:27

2

Increment div outside the fadeOut function.

See also this post for what CSS class names can look like, starting with a digit isn't one of them.

I'd consider using a single class name for the divs you want to apply this too rather than explicitly referencing each div.

Edit In that case, I'd create a collection of the divs separate from everything else. Pass that to a function that performs the operation on the first item in that list. In the fadeOut function, call the same function again, passing the rest of the list. Terminate by not calling the function when there are no more elements. Basically do it recursively.

The same thing could be done iteratively, I just think the recursive version is more intuitive.

edited May 23 '17 at 12:27

Community

1
1

answered Nov 29 '11 at 15:59

Dave Newton

158,873
26
254
302

op wants the div to increment after the first fadeout finished – Nov 29 '11 at 16:02
but in that case all the divs are looped through at one time, I want them one after another – A_funs Nov 29 '11 at 16:02
@A_funs That kind of information should be provided with the question, since it makes a big difference. – Dave Newton Nov 29 '11 at 16:03
@Dave Newton, ok so say I make all my divs with a class of "fade" how do I fade them in and out in series rather than all at once – A_funs Nov 29 '11 at 16:08
The downvote makes no sense unless (a) the original question provided the reqs, and (b) every other answer that said the same thing is also downvoted. – Dave Newton Nov 29 '11 at 16:08
@A_funs See edit, but if order is important, you may need to create the list by hand as you do now. I'd still do it separately, just to keep things obvious, but that's preference. – Dave Newton Nov 29 '11 at 16:09
see my answer below, you have to delay the fadeIn(), not wait for the callback on a fadeOut() – Nov 29 '11 at 16:16
@IntoTheVoid That's *a* solution, yep. I prefer to make the chaining explicit rather than rely on the vagaries of JS timing, but in this case it's likely sufficient. – Dave Newton Nov 29 '11 at 16:19

score 0 · Answer 2 · answered Nov 29 '11 at 16:00

You can't have a DIV class start with a number. It should be something else.

If you want all div's that start with a specific classname, you can use this, but the will all do it on the same moment.:

$("[class^=fader]").fadeIn().delay(4000).fadeOut();

If you want to do it after eachother. Try this:

$("[class^=fader]").each(function(index){
    $(this).delay(index * 4000).fadeIn().delay(4000).fadeOut();
});

score 0 · Answer 3 · answered Nov 29 '11 at 16:02

0

You are incrementing the div inside fadeOut callback which will be executed only when the fadeOut completes, move it outsite. Try this

var div = 1;
while (div < 5){
    $("." + div).fadeIn().delay(4000).fadeOut(function(){

    });
    div++;
}

answered Nov 29 '11 at 16:02

ShankarSangoli

69,612
13
93
124

score 0 · Answer 4 · answered Nov 29 '11 at 16:03

0

Your div++ should not be called inside the anonymous function, but aside your function call, like this

var div = 1;
while (div < 5){
    $("." + div).fadeIn().delay(4000).fadeOut();
    div++;
}

answered Nov 29 '11 at 16:03

Jan Dragsbaek

8,078
2
26
46

score 0 · Answer 5 · answered Nov 29 '11 at 16:06

Set in all divs you like to fade a class.

<div class="fadeClass">

// Select your divs
var divs = $("div#fadeClass");
// fade them all in/out
divs.each(function(index, value) {
   $(this).fadeIn().delay(4000).fadeOut(function(){});
}

http://api.jquery.com/jQuery.each/

score 0 · Accepted Answer · 2011-11-29T16:27:49.477

You can to delay the fadeIn() incrementally:

HTML:

<div class="fade" style="display:none">Div 1</div>
<div class="fade" style="display:none">Div 2</div>
<div class="fade" style="display:none">Div 3</div>
<div class="fade" style="display:none">Div 4</div>

JavaScript:

$(".fade").each(function(i){
    $(this).delay(4000 * i).fadeIn().delay(4000).fadeOut();
});

Demo: http://jsfiddle.net/bN28x/2/

score 0 · Answer 7 · answered Nov 29 '11 at 16:13

jQuery has a function called "each" that could come in handy for this one.

Here is a live example at jsfiddle: http://jsfiddle.net/XGSTP/

It seems Niels just posted a similar answer but I hope adding the jsFiddle helps.

In short, I wouldn't bother using numbered div's and i'm not sure if that's good practice anyways. Loop through the div's using "each":

var delayAmount = 1000; //amount of delay between each div.
$("div.fade").each(function(index){
    $(this).show().delay(index * delayAmount).fadeOut();
});

JavaScript jQuery while loop through divs

7 Answers7