jquery css selector to addClass to divs with background image of...

Question

I'm working on an advanced map application in Google Maps API V3. I'm using an array of lettered markers for the pins on the map (A-J). I've written some jQuery to grab add a different class to each div that contains the marker as a background image so that I can animate the markers. Here's the code I'm using to do this:

$('.markersHolder > div').each(function(){
           if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerA.png)'){
             $(this).addClass('marker0');
           }
           if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerB.png)'){
             $(this).addClass('marker1');
           }
           if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerC.png)'){
              $(this).addClass('marker2');
           }
           if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerD.png)'){
              $(this).addClass('marker3');
           }
           if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerE.png)'){
              $(this).addClass('marker4');
           }
           if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerF.png)'){
              $(this).addClass('marker5');
           }
           if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerG.png)'){
              $(this).addClass('marker6');
           }
           if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerH.png)'){
              $(this).addClass('marker7');
           }
           if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerI.png)'){
              $(this).addClass('marker8');
           }
           if ($(this).css('background-image') === 'url(http://www.axtsweapons.com/gmarkers/red_MarkerJ.png)'){
              $(this).addClass('marker9');
              return false;
           }
         });

This works perfectly in Firefox but doesn't work in other browsers. Anyone have any clue how to get this to work in other browsers? Thanks!

Answer 1

I would have the browser alert() the $(this).css('background-image') - my bet is different browsers return this in different ways, e.g. quoted:

 'url("http://www.axtsweapons.com/gmarkers/red_MarkerJ.png")'

it could be that you'll have to search for the image name in the URL string rather than making an exact comparison.

Answer 2

Try this. It should find the "MarkerA" (etc.) portion of the url of the background-image and if it finds it, add the class using the character code of the capital letter to calculate your 1, 2, 3, etc. on your "marker" class (I have not tested it):

$('.markersHolder > div').each(function(){

   var mark = $(this).css('background-image').match(/Marker./);
   if(mark) {
     $(this).addClass("marker"+(mark[0].charCodeAt(mark[0].length-1)-65));
   }
});

Added this on edit:

If you match the class name to the image name as mcgrailm suggested in the comment to Pekka then it could be just:

$('.markersHolder > div').each(function(){
   var mark = $(this).css('background-image').match(/Marker./);
   if(mark) {
     $(this).addClass(mark[0]);
   }
});

Answer 3

If it's just this repetitive code, you should be able to use a regex

$(".markersHolder > div").each( function() {
        var r = new RegExp("^url\\(.{0,1}http://www.axtsweapons.com/gmarkers/red_Marker([A-Z]).png.{0,1}\\)");
        var s = $(this).css('background-image');
        var x = s.match(r);
        if (x) {
            var charToInt = x[1].charCodeAt(0) - 65;
            $(this).addClass('marker' + charToInt);
        }
});

It extracts the letter after red_marker in the image url and converts it to the appropriate number to find the correct class. You may want to narrow down the .{0,1} part, as . may be too broad (i imagine whitespace, ' and " should be the only cases)