Chọn nhanh tất cả các phần tử có hình nền css

Question

Tôi muốn lấy tất cả các phần tử trên trang có hình nền css. Tôi có thể thực hiện việc này thông qua chức năng lọc nhưng rất chậm trên một trang có nhiều yếu tố:

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

Có cách nào nhanh hơn để chọn các yếu tố có hình nền không?

Answer 1

Nếu có bất kỳ thẻ nào bạn biết sẽ không có hình nền, bạn có thể cải thiện lựa chọn không bao gồm những thẻ có số not-selector^(docs).

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

Ngoài ra, bạn có thể thử sử dụng phương pháp tiếp cận API gốc hơn trong bộ lọc.

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

Ví dụ:http://jsfiddle.net/q63eU/

Các mã trong bộ lọc được dựa trên mã getStyle từ: http://www.quirksmode.org/dom/getstyles.html

---

Đăng một phiên bản for tuyên bố để tránh những chức năng cuộc gọi trong .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'; 
    } 
}