tags:

views:

4351

answers:

2

I have a series of image thumbnails in a page. They are created using css sprites.

<div class="galleryImg1"></div>
<div class="galleryImg2 featured"></div>
<div class="galleryImg3"></div>

I was originally using id="galleryImg1" but changed to using class="galleryImg1" because the images may appear in multiple places on the same page and i wanted to avoid duplicate ids.

I have a jQuery selector to attach click events to all of these classes.

$("[class^=galleryImg]").click(function() {
   // how do i get 'galleryImg2' and '2' here?
}

What I'm wondering is if there is an easy way to find out the className beginning with 'galleryImg' that was clicked on. Will I have to use a regular expression or is there a 'cleverer' way?

(yes if i was using an #ID selector then I could just say 'this.id' but as mentioned I don't want to use IDs because I want to display multiple copies of the same image.)

A: 

You could use a Regex, but using split and indexof will be understood by more programmers. Also for something so simple, maybe better to avoid Regex.

In the event handler use the jQuery normalized Event object:

$("[class^=galleryImg]").click(function(Event) {
    var classAttribute=Event.target.className

    var classes=classAttribute.split(" ");

    for (var i=0;i<classes.length;i++)
    {
        if (classes[i].indexOf('targetClassNamePrefix')==0)
        {
            // This element has the required class, do whatever you need to.

        }
    }
}
Ash
He wants to come up with the ID out of that, though.
Paolo Bergantino
@ash the problem with this is there may be multiple classes. i forgot to *explicitly* mention that but thats why i put in one class name with 'galleryImg2 featured'
Simon_Weaver
I did know you have multipl class names, I just though you were asking about actually getting the class for the clicked element. I've also updated my answer, Regex is slower then just using the Javascript split and then, indexOf()==0.
Ash
@ash but i cant guarantee it will be the first item. to be frank in this particular example i COULD rely on that, but i'm trying to be as generic as possible
Simon_Weaver
@Paolo, 'featured' is not an ID appended to the end of the galleryImg class, it is just another class on that element. The class attribute allows specifying multiple, space separated classes. My example does exactly what is asked.
Ash
@Simon, No problems, I always like seeing alternatives to the way I personally would do it.
Ash
+5  A: 

As far as I know, you're going to need a pretty basic regular expression, like so:

$("[class^=galleryImg]").click(function(Event) {
    var id = this.className.match(/galleryImg(\d+)/)[1];
    console.log(id);
});

If you're particularly averse to this, though, you can use something like this, which won't validate but will Get The Job Done.

<div class="galleryImg1" image_id="1"></div>
<div class="galleryImg2 featured" image_id="2"></div>
<div class="galleryImg3" image_id="3"></div>

<script>
$("[class^=galleryImg]").click(function(Event) {
    var id = $(this).attr('image_id');
    console.log(id);
});
</script>

Since I am assuming you have full control over your HTML and you know that galleryImg class will always be followed by the ID I don't think a regular expression here is evil at all. Just go with it!

Paolo Bergantino
job done :-) thanks. plus i never remember the syntax of regular expressions in javascript despite being quite proficient with them in .NET :-)
Simon_Weaver