javascript - このjQuery検索セレクターを書き直しますか？

Question

IEでパフォーマンスの問題が発生し、ブラウザープロファイラーを使用して、次のように絞り込みました。

$tbody.find('> tr:not(.t-grouping-row,.t-detail-row)')

これは正確には何を意味し、IEでより良いパフォーマンスを発揮するようにこれを書き直す方法についてのアイデアはありますか（意味がある場合は純粋なJavascriptかもしれません）？

Answer 1

了解しました。これが何を意味するのかを段階的に見ていきましょう。

$tbody.find('> tr:not(.t-grouping-row,.t-detail-row)')

$tbodyは変数です。それはおそらくその少し前に定義されました。その名前から「テーブルのtbodyタグ」という意味だと思います。

>「すべての子供たち」を意味します。

tr:not(.t-grouping-row,.t-detail-row)'「クラス「t-grouping-row」および「t-detail-row」を持たないすべてのtr」を意味します。

したがって、セレクターは「クラス「t-grouping-row」および「t-detail-row」を持たないこのtbody内のすべてのTRを検索する」です。

より良いセレクターは次のようになります。

$('tr:not(.t-grouping-row, .t-detail-row)', $tbody)

しかし、これは少しだけ良く、それでも悪いでしょう。HTMLを確認し、必要なものを確認して、などのより単純なセレクターを使用する必要があります$('.class', $tbody)。

Answer 2

私の答えは理論的です。

$tbody.children('tr').filter(function(){
    var that = $(this);
    return (!that.hasClass('t-grouping-row') && !that.hasClass('t-detail-row');
})

.children確認する要素が少ないためよりも効率的です.find。この時点で、シズルエンジンが停止します（シズルは問題のようです）。は、選択するのではなく属性をチェックするに:not置き換えられます。.filter