Dynamic Selectors with Jquery with php while loop

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

You can use an iterator over an array like this:

var myclasses = [".1",".2",".3"]; // generated by php

$.each(myclasses, function(index, value) { 
    $('a '+value).click(function() {
        $(this).css('background':'red');
    });
});

Note: I think you might be better off using unique ID for each item in your list of anchor tags and have them all share a single class. That's more what classes and IDs are for.

Answer 2

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.

Answer 3

Just give them all the same class, say, myClass. Then:

$('a.myClass').click(function () {
    $(this).css('background':'red');
});

This will work as long as you're having the links operate on themselves, or on their parents - as long as the relationship between link and target is the same for each. To operate on the parent, it would be $(this).parent().css(...), and to operate on the next element it would be $(this).next().css(...) and so on.

Answer 4

have you tried something like this?

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

}

And then for the jQuery:

$(document).ready(function() {
    $('a.anchor_link').click(function() {
        var thisAnchor = $(this).attr('id');
        $(this).css('background':'red');
    });
});

The reason for my adding the js var 'thisAnchor' is because I am assuming that you need that $i php variable as the anchor marker? if so you can just take the js var and use it however you need. if you can't use ID because the anchored content is marked by id, use a diferent attr, such as 'title' or 'alt'.

I hope this was helpful.