CSSの背景画像ですべての要素をすばやく選択してください

Question

CSSの背景画像を持つページのすべての要素を取りたいと思います。私は、フィルタ機能を経由して、これを行うことができますが、それは多くの要素をページ上で非常に遅いです：

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

は、背景画像を持つ要素を選択するための任意のより高速な方法はありますか？

Answer 1

背景画像がないことがわかっているタグがある場合は、not-selector^(docs)のタグを除外して選択を改善することができます。

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

さらに、ネイティブAPIアプローチをフィルタで使用することもできます。

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

例：http://jsfiddle.net/q63eU/

フィルタ内のコードは、からでgetStyleコードに基づいています：.filter()での関数呼び出しを避けるためにfor文のバージョンを投稿http://www.quirksmode.org/dom/getstyles.html

---

。

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'; 
    } 
}