如果元素存在则返回函数

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而不是return的例子。使用find（）的一些示例使用了

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

而不是.length没有什么可以检查它存在吗？或者也许是将它与null进行比较的方法？

因此，在函数中，检查DOM中是否存在元素的最有效方法是什么？如果存在，则立即返回该函数？

Answer 1

使用vanilla 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