Change CSS with jQuery within a PHP While Loop

Question

I've been trying to figure this one out for a while now, and have gone through a series of methods however, no cigar.

Q: How would I change the color of a singular div within a PHP while loop, using jQuery following an AJAX response?

GARR!

This is my jQuery function within the response:

   $('.circle').each(function(){
   $(this).css("background", "red");
});

In my PHP file I basically say that if the status is there echo the div, however when the jQuery is triggered by the response it affects all $red variables, rather than just the one I'm trying to target. test2.php:

    $red = "<div id='basic' class='circle' style='display: block; border-radius: 100%; width: 60px; height: 60px;' value='1'></div>";
            if($row2['status'] == 1 || 0){
        echo $red;
    }

It's frustrating because it works perfectly fine if I echo variables depending on the data id with different background colors and display: none , however it'd be nice to get it working without refresh using the jQuery method.

Answer 1

AJAX and JQuery are synchronous. Try setting your functions up as callbacks, particularly if they rely on DOM changes.

Answer 2

I think your problem is that all your divs are the same class, so your jQuery code affects them all.

Have you considered selecting using the id of the div, instead of the class? Rule of thumb: use the class attribute to identify all similar entities in a group, and use the id to uniquely identify each entity in the group. Ids are unique, classes are made to be shared.

By the way, why are you using jQuery's each() if you want to change a single div? each() is used to iterate over a set of matched elements, it's not useful when you know you have only one element to operate on.

If you want to select divs individually, name each div with an unique id:

<div if='basic_1' class='circle' ... >
<div if='basic_2' class='circle' ... >
<div if='basic_3' class='circle' ... >

And then change your jquery to select only the div you want to change:

$('#basic_2').css("background", "red");

Answer 3

i understand that you use an ajax to execute a php script and pass to it some variable ( $row2['status'] ) if this variable is 1 you want to set the background colour of this particular div, in the current iteration to red .

But you didn't tell us if the loop generate a div in each iteration and you want to set particular divs background to red or only one div background color have to change.

if you want to change the background color of only one div then when the condition occure ( $row2['status'] == 1 ) you should break; and go out of the loop and you have to select the div using id not class because as @Marcovecchio said

Ids are unique, classes are made to be shared.

if your loop will echo more than one dive then you have to make sure that your page doesn't contain other divs with class = 'circle' so you can change the echoed divs only.

it will be better if you provide the loop and tell us more about what you want to do exactly.