Селектор jquery css для добавления класса в div с фоновым изображением

Question

Я работаю над усовершенствованным приложением карты в Google Maps API V3. Я использую массив буквенных маркеров для булавок на карте (A-J). Я написал jQuery для добавления отдельного класса в каждый div, который содержит маркер в качестве фонового изображения, чтобы я мог анимировать маркеры. Вот код, который я использую для этого:

$('.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;
           }
         });

Это отлично работает в Firefox, но не работает в других браузерах. Кто-нибудь есть какие-либо подсказки, как заставить это работать в других браузерах? Спасибо!

Answer 1

Попробуй это. Он должен найти часть «MarkerA» (и т. Д.) URL-адреса фонового изображения, и, если он его найдет, добавьте класс, используя код символа из заглавной буквы, чтобы вычислить 1, 2, 3 и т. Д. На вашем класс «маркера» (я его не проверял):

$('.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));
   }
});

Добавлено это при редактировании:

Если вы сопоставите имя класса с именем изображения, как mcgrailm предложил в комментарии к Pekka, тогда это может быть просто:

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

Answer 2

У меня был бы браузер alert() $(this).css('background-image') - моя ставка в разных браузерах, возвращают это по-разному, например, цитировал:

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

Возможно, вам придется искать по имени изображения в строке URL, а не делать точное сравнение.

Answer 3

Если это просто повторяющийся код, вы можете использовать регулярное выражение

$(".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);
        }
});

. Он извлекает букву после red_marker в URL-адресе изображения и преобразует ее в соответствующее число, чтобы найти правильныйучебный класс.Вы можете захотеть сузить часть .{0,1}, так как . может быть слишком широким (я думаю, пробелы, ' и " должны быть единственными случаями)