1

要素のクラスが DOM 内に既に存在する場合、関数を分割する最も効率的な方法を探しています。

たとえば、現在使用しているスパンのクラスが存在するかどうかを確認します

$(function() { 
    //logic will execute

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

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

return ではなく if/else を使用する例をいくつか見てきました。find() を使用していたいくつかの例は、

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

.length の代わりに、それが存在することを確認するものは何もありませんか? または、それを null と比較する方法はありますか?

では、関数内から要素が DOM に存在するかどうかを確認する最も効率的な方法は何ですか?存在する場合は、関数がすぐに返されますか?

4

2 に答える 2

1

選択が空でないことを確認する方法を使用するか、他の方法を使用する.lengthかどうかは、本質的に違いはありません。[0]重要なことは、最も効率的な方法で要素を検索していることを確認することです。これは、検索対象によって異なります。効率的なセレクターの作成に関するリソースを次に示します。

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

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

于 2013-06-23T00:31:10.560 に答える
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 に答える