Szybko zaznacz wszystkie elementy z obrazem tła css

Question

Chcę pobrać wszystkie elementy na stronie, która ma obraz tła CSS. Można to zrobić za pomocą funkcji filtrowania, ale jest to bardzo powolny na stronie z wielu elementów:

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

Czy istnieje szybszy sposób, aby wybrać elementy z obrazów tła?

Answer 1

Jeśli istnieją jakieś tagi, o których wiesz, że nie będą miały obrazu tła, możesz poprawić zaznaczenie wyłączając te z not-selector^(docs).

$('*:not(span,p)') 

Oprócz tego można spróbować użyć bardziej natywnej metody API w filtrze.

$('*').filter(function() { 
    if (this.currentStyle) 
       return this.currentStyle['backgroundImage'] !== 'none'; 
    else if (window.getComputedStyle) 
       return document.defaultView.getComputedStyle(this,null) 
          .getPropertyValue('background-image') !== 'none'; 
}).addClass('bg_found'); 

Przykład:http://jsfiddle.net/q63eU/

Kod w filtrze jest oparty na kodzie getStyle od: http://www.quirksmode.org/dom/getstyles.html

---

publikowania wersji for oświadczenie, aby uniknąć wywołania funkcji w .filter() .

var tags = document.getElementsByTagName('*'), 
    el; 

for (var i = 0, len = tags.length; i < len; i++) { 
    el = tags[i]; 
    if (el.currentStyle) { 
     if(el.currentStyle['backgroundImage'] !== 'none') 
      el.className += ' bg_found'; 
    } 
    else if (window.getComputedStyle) { 
     if(document.defaultView.getComputedStyle(el, null).getPropertyValue('background-image') !== 'none') 
      el.className += ' bg_found'; 
    } 
}