Как найти все элементы с заданным фоновым изображением

Question

Я ищу способ выбрать все объекты с заданным backgroundImage.Я уже пробовал такие вещи, как:

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

Конечно, не все элементы будут иметь фон, такой как span, ссылки и т. Д. Использование * стоит дорого, вместо '.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

    }

});

Incedental, часть regEx записывает все, кроме имени файла (если оно существует). Причина этого добавления в том, что - в зависимости от браузера - вы можете найти что-то вроде:

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

Answer 4

Вы на правильном пути:

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

Но, как отмечалось в комментариях, сделать это для всех элементов, возможно, не тот путь!