How to target an image by part of its filename with jQuery

Question

I have several images on a site with filenames like filename_mov.jpg. The filename part is what is dynamically generated, e.g: 123456abc_mov.jpg.

I want the target this by searching for part of the filename, as _mov.jpg is the only thing that’s consistent.

Using jQuery can I search for this?

I’ve tried:

$("img[src*='_mov.jpg']").addClass('movieThumb');

But it doesn’t work.

you'd need selectors with regular expressions - http://stackoverflow.com/questions/190253/jquery-selector-regular-expressions - but it may be just better to iterate through all images and check the src attribute value — scibuff, Mar 09 '12 at 12:26
In which way does it "not work"? The selector looks fine and would select an image with this URL: http://jsfiddle.net/j6cc2/ — Felix Kling, Mar 09 '12 at 12:26
have you used a debugger to check the class is being applied - it may be that your styling is not working as expected — Manse, Mar 09 '12 at 12:34
Thanks all for your replies. It was conflicting with a function further on in the script that stopped it working. Had me baffled for a while. — JayDee, Mar 16 '12 at 10:13

score 2 · Accepted Answer · answered Mar 09 '12 at 12:35

2

Use the “attribute ends with” selector:

$('img[src$="_mov.jpg"]').addClass('movieThumb');

Or you could do the filtering yourself using jQuery#filter():

$('img').filter(function() {
  return /_mov\.jpg$/.test(this.src);
}).addClass('movieThumb');

answered Mar 09 '12 at 12:35

Mathias Bynens

144,855
52
216
248

I ended up using this filter. Thank you for your reply. – JayDee Mar 16 '12 at 10:14

Johan · Answer 2 · 2012-03-09T14:56:10.887

1

$('img').each(function(){

    var src = $(this).attr('src');
    if(src.indexOf('_mov') != -1)
        //do stuff
});

Not sure how well indexof works on strings in IE though.

edited Mar 09 '12 at 14:56

answered Mar 09 '12 at 12:32

Johan

35,120
54
178
293

1

`$("img[src*='_mov.jpg']")` should work fine though... if that does not work, your could shouldn't either. But yes, `indexOf` works for strings in IE as well. *edit:* Your code is actually not correct. It returns `true` if `indexOf` returns `-1` i.e. the substring was not found. It will probably be true for every image then. You have to compare against `-1`: `if(this.src.indexOf(...) > -1)`. – Felix Kling Mar 09 '12 at 12:35

score 1 · Answer 3 · edited Mar 09 '12 at 12:41

1

Use the $.filter

$('img')
    .filter(function() {
        return this.src.match(/_mov\.jpg$/);
    })
.addClass('movieThumb');
;

edited Mar 09 '12 at 12:41

Mathias Bynens

144,855
52
216
248

answered Mar 09 '12 at 12:35

scibuff

13,377
2
27
30

score 0 · Answer 4 · answered Mar 09 '12 at 12:29

0

To avoid fiddling with complicated selectors, I'd suggest adding a certain CSS class, like <img class="mov_image" src="...._mov.jpg">:

$('.mov_image').addClass('movieThumb');

answered Mar 09 '12 at 12:29

Alexander Pavlov

31,598
5
67
93

1

adding a class to identify the elements he needs to add a class is an endless task. – Christian Mar 09 '12 at 12:41
This is not an uncommon use to [employ CSS classes to provide semantics](http://code.google.com/apis/checkout/developer/Google_Checkout_Shopping_Cart_Annotating_Products.html) ([here is another one](http://microformats.org/2005/10/19/more-than-styling)). – Alexander Pavlov Mar 09 '12 at 12:57

How to target an image by part of its filename with jQuery

4 Answers4