Given the following JS/JQUERY, how to prevent it from being case sensitive

Question

I have the following line of code which works well:

$("a.grouped_elements[href$=.jpg],a.grouped_elements[href$=.png],a.grouped_elements[href$=.gif]").fancybox();

Problem is, if the href is .JPG it doesn't work it only works with .jpg. How can I make the above case insensitive so either all caps or no caps or a mix all match for the file extension?

Thanks

Answer 1

Apparently, "a filter function should do what you need".

Since I am not familiar with filter functions, I would try something like the following, though I am not sure how efficient/inefficient it might be compared to filter functions mentioned above:

$('a.grouped_elements').each(function(){
    var elem = $(this);
    if(elem.attr('href').match(/(gif|jpg|png)$/i) != null) {
        elem.fancybox();
    }
});

(hasn't been tested but that's the general gist of it)

Answer 2

Using filter as also mentioned by @Ricket. The idea is to return true if we want the element to be included, false otherwise.

var fancyBoxable = $('a.groupd_elements').filter(function(){
    var href = $(this).attr('href') || '';
    return /(gif|jpg|png)$/i.test(href);
});

fancyBoxable.fancybox()

Answer 3

Ok this ended up working:

$('a.grouped_elements').each(function(){
    var elem = $(this);
    // Convert everything to lower case to match smart
    if(elem.attr('href').toLowerCase().match('/gif|jpg|png/') != null) {
        elem.fancybox();
    }
});