如果元素存在，则返回一个函数

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