☰

$('#tabs a') と $('#tabs').find('a') の違い 質問する

tag-icon • tag-icon javascript jquery pycharm
$('#tabs a') と $('#tabs').find('a') の違い 質問する

私は次のような構造を持っています

<ul id="tabs" class="nav nav-tabs">
    <li><a href="#aaa" hashval="aaa">AAA</a></li>
    <li><a href="#bbb" hashval="bbb">BBB</a></li>
    <li><a href="#ccc" hashval="ccc">CCC</a></li>
    <li><a href="#ddd" hashval="ddd">DDD</a></li>
</ul>

現在、次のコードでアンカー タグを操作していますが、正常に動作しています。

$('#tabs a[href="#ddd"]').tab('show');

私はpycharmを使っていますが、これは「IDセレクターの先頭」という警告を行に追加します。それをクリックすると、pycharmは次のように変わります。

$('#tabs').find('a[href="#ddd"]').tab('show');

どちらも正常に動作していますが、違いがわかりません。

両者の違いは何ですか？より具体的には、$('#tabs a[href="#ddd"]')との違いは何ですか$('#tabs').find('a[href="#ddd"]')？

ベストアンサー1

$("#tabs a")評価する右から左に- これは両者の本来の方向であるシズルセレクタエンジンとquerySelectorAll- つまり最初に見つける全てページ内のアンカー要素を検索し、その下のアンカー要素に絞り込みます#tabs。

$("#tabs").find("a")より直感的に評価する左から右へつまり、まず を見つけ#tabs、次にのみその下のアンカー要素。

明らかに後者はよりよい性能ただし、累積的に、つまり何千ものクエリを実行した場合にのみ顕著になります。それ以外の場合、違いはごくわずかです。

おすすめ記事