How to do this trick with jquery each?

Question

My php code is:

for($i = 1; $i < 22; $i++) {

    echo '<div id="number" style="display:none">'.$i.'</div>';

}

My jquery code:

$('#number').each(function() {

    $(this).slideDown("slow");  

})

What is wrong here? I want to achieve the effect when all the numbers appear, one after another. I mean, first of all, slides down number 1, after it number 2 and so on. And now only slide down number 1, and nothing happens after it, although I use jquery each. Thank.

Answer 1

Firstly, your PHP needs to be changed, it displays invalid HTML, so this:

for($i = 1; $i < 22; $i++) {
  echo '<div id="number" style="display:none">'.$i.'</div>';
}

You need to be something like this (or remove it idcompletely if it is not needed):

for($i = 1; $i < 22; $i++) {
  echo '<div id="number'.$i.'" class="number" style="display:none">'.$i.'</div>';
}

Then your jQuery should look something like this:

$('.number').each(function(i) {
  $(this).delay(600*i).slideDown("slow");  
});

Here you can view the demo.

, 600 ( "" = 600 ), 1200 .., . , , .delay() , .

Answer 2

id="number". . class="number".

:

PHP-:

for ($i = 1; $i < 22; $i++) {
    echo '<div class="number" style="display:none">'.$i.'</div>';
}

JS-:

$('.number').each(function() {
    $(this).slideDown("slow");  
});

Answer 3

. CSS ( ".number" ).

, , , . , , , , - - . ,

function slideNext()
{
    $(".number:first").each(function() {
        $(this).slideDown("slow").removeClass("number");
        window.setTimeout(slideNext, 1000);
    });
}

$(document).ready(slideNext);

: , jQuery.

Answer 4

id. HTML , jQuery , . class $('.number')

Answer 5

. :

PHP    ($ = 1; $i < 22; $i ++) {

   echo '<div class="number" style="display:none">'.$i.'</div>';
}

Jquery:

$('.number').each(function() {

    $(this).slideDown("slow");  

})

Answer 6

id, id . , .

PHP:

for($i = 1; $i < 22; $i++) {

    echo '<div class="number" style="display:none">'.$i.'</div>';

}

JQuery

$('.number').each(function() {

    $(this).slideDown("slow");  

})

! !

Answer 7

hey - this will not work mainly because the identifier must be unique, so the code will not work. it can work if you should use a class and not an identifier (i.e. <div class="number").

did not try - so simple a thought really.

Jim

Answer 8

It is true that according to the specification there should be only one element with a given ID, but you can overcome it by doing:

$( "*[id='number']").each(function() {

        $(this).slideDown("slow");  

  });

Answer 9

Hey, for the delay, try the following:

$('.number').each(function(i) {
  setTimout($(this).slideDown("slow"), i*250);  
});

you never know ...