Question

I have a while loop which creates a list of anchor tags each with a unique class name counting from 1 to however many items there are. I would like to change a css attriubute on a specific anchor tag and class when it is clicked so lets say the background color is changed. Here is my code

while($row = mysql_fetch_array($results)){
 $title = $row['title'];
 $i++;
 echo "<a class='$i'>$title</a>

}

I would like my jquery to look something like this, it is obviously going to be more complicated than this I am just confused as where to start.

$(document).ready(function() {
$('a .1 .2 .3 .4 and so on').click(function() {
$('a ./*whichever class was clicked*/').css('background':'red');
        });
   });

Answer 1

Can you give the class a more consistent name? Like myClass_1, myClass_2, etc.

Then you could do:

$(document).ready(function() {
    $('a[class^=myClass_]').click(function() { // Assign handler to elements with a
                                               //  class that starts with 'myClass_'
        $(this).css('background','red');  // Change background of clicked one.

    });
});

Here, a “starts with” selector is used to assign the event to all classes that start with myClass.

You could still retrieve the index number if needed.

Within the event handler, $(this) refers to the one that was clicked.

Live Example: http://jsfiddle.net/Jurv3/

Docs for “starts with” selector: http://api.jquery.com/attribute-starts-with-selector/

EDIT: I had a missing ] in the selector. Fixed now.