1

如果 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 中是否存在元素的最有效方法是什么，如果存在，则立即返回该函数？

4

2 回答 2

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

查看 jsPerf jsperf 测试

也可以反过来做。检查元素是否不存在，然后做一些事情。如果确实如此，请不要理会它。

$(function() { 
    //logic will execute

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

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

更多的是一种风格。

于 2013-06-23T00:24:53.110 回答
1

无论您是否使用.length或[0]任何其他方式检查选择是否为非空，本质上都没有区别。重要的是确保您以最有效的方式搜索元素，这取决于您要搜索的内容。以下是一些关于编写高效选择器的资源：

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

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

于 2013-06-23T00:31:10.560 回答