如果元素存在，則返回一個函數

Question

如果一個元素類已經存在於DOM中，我正在尋找打破函數的最有效方法。

例如，檢查是否一類跨度的存在，此刻我正在使用

$(function() { 
    //logic will execute 

    if ($(this).find('span.myspan').length) return; 

    //logic will execute if search doesn't find span.myspan 
}); 

我已經看到了使用一些if/else語句而不是返回的幾個例子。一些使用find（）的例子已經使用了

.find('span.myspan')[0] 

而不是.length是不是有沒有檢查它存在？或者可能是一種將其與null進行比較的方法？

因此，從函數內部檢查DOM中是否存在元素的最有效方法是什麼？如果存在，函數立即返回？

Answer 1

使用香草JS

console.time('t'); 
    document.querySelector('.label-key'); 
    console.timeEnd('t') 
    t: 0.000ms 
    console.time('t'); 
    $('.label-key'); 
    console.timeEnd('t') 
    t: 1.000ms 

Check out jsPerf

這樣做，也是周圍的其他方法。 檢查元素是否不存在然後做東西。如果它確實放在一邊。

$(function() { 
    //logic will execute 

    if (! document.querySelector('.label-key');){ 

    //logic will execute if search doesn't find span.myspan 
    } 
}); 

更多的是一種風格的東西真的。

Answer 2

無論您使用.length還是[0]或以其他方式檢查選擇是否非空，它都沒有區別。重要的是要確保您以最有效的方式搜索元素，而這將取決於您正在搜索的內容。下面是關於編寫有效選擇一些資源：

http://www.sitepoint.com/efficient-jquery-selectors/

https://developers.google.com/speed/docs/best-practices/rendering#UseEfficientCSSSelectors