jQueryで動作するDOM要素を参照するためのヒント

StackOverflow https://stackoverflow.com/questions/1817407

  •  08-07-2019
  •  | 
  •  

質問

jQuery（DOM / Traversing / Selectors）で要素を参照する方法に関するアドバイスが必要です。 必要な要素にidを設定してこれを行うだけで十分な場合があります：

$('#elementID').hide();

しかし、それは単に使用できない場合があります。たとえば、n個の要素のリストを操作するとき、次のようにリストの各要素にクラスをアタッチする人がいます。

<a class="selectMe" href="http://jquery.com/">jQuery1</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>

そして、jQueryでこれを行います：

$('.selectMe').hide();

他のいくつかは同じですが、rel属性などを使用します。

これがシナリオである場合、他の一部の人はこれを非常に一般的であるため怖いです：

<div id="MyID">
<span>Some Text Here</span><a href="http://jquery.com/">jQuery1</a>
</div>

イベントをアンカーに添付する場合：

$('#MyID a').show();

そのDIV内にリンクが1つしかないと仮定してください。

あなたが考えていることは、本当にシナリオに完全に依存するか、これを行うためのいくつかの良い習慣があります。

役に立ちましたか？

解決

最速の構造を探します。 IDは最速です。 最小のコンテキストをすばやく取得します-DIVでIDを使用し、そこから選択することもできます-可能な場合は完全なDOM検索を避けます。

たとえば、単なるクラスよりも、クラスを持つ要素を検索する方が高速です。

これのいくつかは直感的ではありません。 StackOverflowのいくつかの例を見て、何が機能しているかを理解してください。

たとえば：

<div id='mydiv'>
<a class="selectMe" href="http://jquery.com/">jQuery1</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>
</div>

次に選択を行います：（ノートごとに編集）

$('#mydiv').children('a.selectMe').hide();

これは、そのコンテキスト内でのみリンクを検索します。

ノートごとに編集：

選択構文には、次のようないくつかの設定があります。

 $('#mydiv').children('a.selectMe').hide();
 $('#mydiv > a.selectMe').hide();

jQueryのドキュメントとして必要な私の部分の研究は、ここでは少しあいまいです： ＆quot; 親＆gt;戻り値：配列 ＆quot; child＆quot;で指定されたすべての子要素に一致します「親」で指定された要素の。 ＆quot; そして ＆quot; children（expr）戻り値：jQuery 一致した要素セットのそれぞれの一意の直接の子すべてを含む要素セットを取得します。 ＆quot;

私の心で明確にする必要がある質問は、最初のフォームがすべての子/孫を返すか、2番目のフォームが真であると直接の子だけを返すかです。 これらの1つは、「セレクタ」です。フォームと「トラバーシング」の下にあるもう1つは、似たような機能的なタスクですが、まったく同じものではありません。

他のヒント

状況によって異なりますが、Mark Schultheissが言ったように、jQueryがセレクターを実行して要素を取得する方法を理解するのに役立ちます。

コンテキストを指定せずにclassNameで選択すると、 getElementsByClassName がサポートされないため、IEでは遅くなります。この記事をご覧ください http://ejohn.org/blog/getelementsbyclassname-speed-comparison/。要素名（ div.className など）を先頭に追加するか、次のような小さなスコープに検索を制限するのに役立ちます- $（ '。class'、 '#myDiv'）

属性セレクターも同様です。 rel 属性の不正使用は、ブラウザにはネイティブの属性による検索機能がないため、 class 属性の不正使用よりも悪いです。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top