While-loop divs not reacting

Question

I have a list of divs created using a while-loop

while($row = mysql_fetch_array($result)){
$output = "<div id='drag'>$row[id] - $row[name] - $row['email']</div>";
echo $output;}

When I try to make those divs highlighted for a few seconds. Only the first div seems to be reacting.

$("#drag").effect("highlight", {}, 2000);

Is there any strategy to make all the output be highlighted this way? And is there a way to make a certain div or divs highlighted?

Answer 1

IDs must be unique by definition. You can use classes instead.

while($row = mysql_fetch_array($result)){
    $output = "<div class='drag'>$row[id] - $row[name] - $row['email']</div>";
    echo $output;
}

Then...

$(".drag").effect("highlight", {}, 2000);

Answer 2

id is used to give a div unique id. so in the while loop you are giving same id in the loop to all div. that's why when you are trying to highlight, it is effecting first div.

try this code:

while($row = mysql_fetch_array($result)){
    $output = "<div class='drag'>$row[id] - $row[name] - $row['email']</div>";
    echo $output;
}

after that apply effect to that class drag

$(".drag").effect("highlight", {}, 2000);

hope it will help you :)

Answer 3

Using multiple items in a page with the same id is disallowed and, though it may work for some use cases, will cause problems in others (as you're seeing). In general, you'll want to use classes unless ids are required. I'd also recommend that you specify the selector more distinctly that you would with the id (ie, more elements).

For my own code, I tend to use an id for the page body (ie, which page it is) and distinct elements on the page (header content, main content, right rail content, footer content). It's rare that I use ids anywhere else (though it's been known to happen).

Once you switch it over to a class, you can easily change your JS to do something like

$("div.drag").effect("highlight", {}, 2000);

If possible, adding something more distinct to the div.drag path so that you won't wind up effecting other parts of the page you hadn't considered/written when you worked on this.