JQuery querySelector:クラスとIDで選択することに利点はありますか?

私はいくつかの古いjqueryコードを継承しました、そして元の開発者が至る所でクエリセレクタ ".class #id"を使っていることに気づきます。例えば ​​:

 $('.red #mydiv')

これは、より良い、より悪い、あるいは全く同じですか。

 $('#mydiv')

なぜ?パフォーマンス上の理由

私の好奇心は知りたくてたまりません!

3

5 答え

最速の方法はIDセレクタを使うことです: $( '#mydiv')または document.getElementById( "mydiv")

あなたがあなたの特定のケースで考えることができる(そのコードの作者が実際に彼がしていることを知っていれば)それはおそらくjQueryコードが手段において一般的であるということです:

  • The same jQuery code is processed in all pages
  • #mydiv can appear in multiple pages but in different places
  • in some pages it's inside .red
  • Target only such cases where #mydiv appears inside .red

したがって

$('.red #mydiv').text("Hello, World!")

page1.html

<div class="red">
   <div id="mydiv">Hello, World!</div>
</div>

page2.html

<div class="blue">
   <div id="mydiv"></div>
</div>

セレクタに特定性の追加のレイヤーを追加します。

1
追加された
@ Connemara1はい、HTMLで #mydiv が何らかの親クラスに依存していることに意味のある理由が見つからない場合は、無駄な .red 。また、JSファイルを見て、 #mydiv <div class = "red"> に動的にラップされていないことを確認してください(例:jQueryのの使用)。 wrap()
追加された 著者 Roko C. Buljan,
ああ、なるほど。それは理にかなっている。私が見ているケースでは、私はクラスセレクタを使用する理由がわかりません。
追加された 著者 Connemara1,

idだけを使ったパフォーマンス的な方法が最も効率的です。ただし、IDの前に上位クラスを持つことには有効な使用例があります。

たとえば、現在使用されているルートに応じてボディに異なるクラスを設定するバックエンドテンプレートを検討してください。 idはすべてのルートに存在する可能性がありますが、そのボディクラスが存在する場合にのみそれに固有の何かをしたいと思うかもしれません。

1
追加された

私はこの質問に複数の答えがあると思います。

最初の答えは、コードがこのようなセレクターを使用している場合、おそらくあなたの相棒が1つのユニークな要素をターゲットにすることによってそれを間違ってやっていた - 2回です。 二つ目の答えは、彼が悪いHTMLを持っているということでしょう。そして彼はそのようにしなければなりません。 3番目の答えは、彼は同じ行動をしているページ上に複数の要素を持っているということです。

1
追加された

あなたが捕獲したいのであればそのクラスまたはその特定のdivを持つすべての要素のためのホバーイベントを言ってみましょう。これはOR条件であってANDではないことを忘れないでください。

0
追加された

それはおそらくあなたがやろうとしていることによります。

CSSでは、クラス属性は通常特定のスタイルを継承する必要がある多くの要素を対象としていますが、ID属性は特定のスタイルを継承する必要がある特定の要素を対象としています。

実際にはパフォーマンスの問題ではありません。 .red クラスセレクタによって与えられる属性が必要な場合、または必要なのが myDiv IDだけである場合は問題になります。さらに、IDまたはクラス属性に基づいて要素を選択して識別するJavascriptまたはJQueryコードが他にある場合は、そのコードがそれらの要素を見つけるためにどちらか一方が必要になることがあります。

IDは1つの要素によってのみ使用されることを意図していますが、MANY要素はクラスを持つことができ、実際、要素はしばしば複数のクラスを持つことができます。

0
追加された