如何查找具有指定背景图像的所有元素

Question

我正在寻找一种方法来选择具有指定背景图像的所有对象。 我已经尝试过这样的事情：

$.each($('*'), function(){
  if ($(this).css('backgroundImage')){
    console.info("backroundimage");
  }else {
    console.info("no backgroundimage");
  }
});

一些更好的想法？

Answer 1

过滤器？

$('*').filter(function() {
     return $(this).css('background-image') == 'image.png';
});

Answer 2

一种方法：

var elementsWithBG = $('.YourSelector').filter(function(){
    return this.style.backgroundImage != ''
});

当然，并非所有元素都会有背景，例如跨度、链接等。使用 * 的成本很高，您可以用逗号分隔所需的元素，而不是 '.YourSelector'< /代码> 例如：

$('div, p, etc')

Answer 3

你几乎已经达到了它的关键。

扩展您已有的内容：

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

    var bgImgStr = $(this).css('backgroundImage'),
        regEx = /\"|\'|\)/g,
        bgImgName = bgImgStr.split('/').pop().replace(regEx,'');

    if(bgImgName === 'whatever.jpg'){

        // do something

    }

});

顺便说一句，regEx 部分会提示除文件名（如果存在）之外的所有内容。添加此内容的原因是 - 根据浏览器 - 您可能会发现自己遇到类似以下情况：

url('../images/myImg.jpg')

Answer 4

您走在正确的轨道上：

var url = $(this).css("background-image");
if (url == theExpectedImageUrl) {
  //found image
});

但正如评论中所述，对所有元素执行此操作可能不是正确的方法！