How to make this trick with Jquery's each? - php

Question

My php code:
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's wrong here? I want to achieve effect when all numbers, each after another would appear. I mean, first of all slides down number 1, after him number 2 and so on. And now only slides down number 1 and after him nothing happens although I use jquery each. Thank you.

Answer 1

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 2

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 3

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 4

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 5

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 6

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 7

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 8

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 9

hey, for the delay, try this:
$('.number').each(function(i) {
setTimout($(this).slideDown("slow"), i*250);
});
you never know...