jquery css 选择器将类添加到具有背景图像的 div答案

【问题标题】：jquery css selector to addClass to divs with background image ofjquery css 选择器将类添加到具有背景图像的 div
【发布时间】：2010-07-16 18:42:19
【问题描述】：

我正在开发 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 中完美运行，但在其他浏览器中无法运行。任何人都知道如何让它在其他浏览器中工作？谢谢！

【问题讨论】：

标签： jquery css google-maps-api-3

【解决方案1】：

试试这个。它应该找到背景图像的 url 的“MarkerA”（等）部分，如果找到它，使用大写字母的字符代码添加类以计算您的 1、2、3 等“marker”类（我没有测试过）：

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

【讨论】：

Doh，当我摆弄我的正则表达式字符串时，我打败了我 10 分钟
是的，我也花了几分钟 :-)
谢谢大家！我会试一试！
这个解决方案是完美的！！！多谢你们！！我真的要学习那些正则表达式的东西。你在哪里看的？
我刚刚通过在网络上搜索它来学习它。正则表达式有很多东西，而且确实需要一段时间才能消化（我仍然认为自己在这方面有点新手）。

【解决方案2】：

我会使用浏览器 alert() $(this).css('background-image') - 我敢打赌，不同的浏览器会以不同的方式返回它，例如引用：

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

您可能必须在 URL 字符串中搜索图片名称，而不是进行精确比较。

【讨论】：

+1 搜索而不是进行精确匹配听起来是一种更强大的解决方案。但是，我仍然认为这里有太多的代码重复。
@Anurag 绝对是：这将是数组中最好的。
好的。我对 jQuery 有点陌生，我希望能够像您在上面引用的那样搜索图像名称末尾的字母（J.png）？我该怎么写？
如何将它放入数组中？
我建议使用与您的图像命名方式相同的类

【解决方案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);
        }
});

它提取图像url中red_marker之后的字母并将其转换为适当的数字以找到正确的类。您可能想缩小.{0,1} 部分的范围，因为. 可能太宽泛（我想空格，' 和" 应该是唯一的情况）

【讨论】：