How to make this trick with Jquery's each?

Answer 1

IDs are meant to be unique. Use a CSS class (and corresponding selector ".number") instead.

Once you have them all showing, i'm guessing they'll be showing up all at once. In order to fix that, you'll probably need to create a function that slides in the next number and sets a timeout to call itself again. Like,

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

$(document).ready(slideNext);

Note, this is not tested, and i am not by any means a jQuery guru.

Answer 2

You are creating multiple elements with the same id attribute. this is illegal according to the HTML spec and is preventing your jQuery selector from being able to determine which element you are trying to access. Try using a class attribute instead and using $('.number')

Answer 3

There may only be one id="number" in your code. IDs are unique. Use class="number" instead.

That is:

Your PHP-Code:

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

Your JS-Code:

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

Answer 4

hey - this wouldn't work basically because the id has to be unique, thus the code isn't going to work. it might work if you were to use a class rather than an id (i.e. <div class="number").

haven't tried it - so just a thought really..

jim

Answer 5

First, your PHP needs a change, it's rendering invalid HTML, so this:

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

Need to be something like this (or remove the id completely if it's not needed):

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

Then your jQuery should be something like this:

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

You can view a demo here

This will show the first immediately, the second 600ms later (speed "slow" = 600ms), the third after 1200ms, etc, so they'll happen one after the other. All we're doing is using .delay() and passing the index of the element in the set times the animation duration, so they occur in order.

Answer 6

You can't have more than one element with the same ID. You need to use a class instead:

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

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

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

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

  });

Answer 8

Use a class instead of an id as id must be unique. I've tried it with class and it worked.

PHP:

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

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

}

jQuery:

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

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

})

Cool effect! Good luck!

Answer 9

hey, for the delay, try this:

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

you never know...