web-dev-qa-db-ja.com

：eq（）と：nth-​​child（）のjQueryの違い

JQueryでは、：eq（）と：nth-​​child（）を使用して要素を選択することの主な違いは何ですか？

また、一般的に、開始インデックスについて、それは「0」から始まり、「1」からいつ始まりますか？

javascriptjquerydomjquery-selectors
32
testndtv

：eq（）

一致したセット内のインデックスnの要素を選択します。

インデックス関連のセレクター（：eq（）、: lt（）、: gt（）、: even、：odd）は、それらに先行する式に一致した要素のセットをフィルターします。それらは、この一致したセット内の要素の順序に基づいてセットを絞り込みます。たとえば、要素がクラスセレクター（.myclass）で最初に選択され、4つの要素が返される場合、これらの要素には、これらのセレクターの目的でインデックス0〜3が与えられます。

：nth-​​child（）

親のn番目の子であるすべての要素を選択します。

JQueryの：nth-​​child（n）の実装はCSS仕様から厳密に派生しているため、nの値は「1インデックス」であり、カウントは1から始まります。ただし、他のすべてのセレクター式では、jQueryはJavaScriptの「 0インデックス付きのカウント。したがって、2つの_<li>_ sを含むシングルがある場合、$('li:nth-child(1)')は最初の_<li>_を選択し、$('li:eq(1)')は2番目を選択します。

：nth-​​child（n）擬似クラスは：eq（n）と簡単に混同されますが、2つでは劇的に異なる一致要素が生じる可能性があります。 ：nth-​​child（n）では、子が何であるかに関係なく、すべての子がカウントされ、指定された要素は、疑似クラスに接続されたセレクターと一致する場合にのみ選択されます。 ：eq（n）を使用すると、他の要素の子に限定されず、疑似クラスにアタッチされたセレクターのみがカウントされ、n + 1番目（nは0ベース）が選択されます。

：nth-​​child（an + b）擬似クラス表記は、nの正の整数またはゼロ値に対して、ドキュメントツリー内でその前に+ b-1兄弟があり、親要素を持つ要素を表します。ゼロより大きいaとbの値の場合、これは要素の子をa要素のグループ（最後のグループが残りを占める）に効果的に分割し、各グループのb番目の要素を選択します。たとえば、これにより、セレクターはテーブル内の1行おきにアドレス指定でき、段落テキストの色を4サイクルで交互に変更できます。 aとbの値は整数（正、負、またはゼロ）でなければなりません。要素の最初の子のインデックスは1です。

これに加えて、：nth-​​child（）は「奇数」と「偶数」を引数として取ることができます。 「奇数」は2n + 1と同じ意味を持ち、「偶数」は2nと同じ意味を持ちます。

この異常な使用法の詳細については、 W3C CSS仕様 。を参照してください。

詳細な比較

デモをご覧ください： http://jsfiddle.net/rathoreahsan/sXHtB/ -リンクが更新されました

参考文献もご覧ください

http://api.jquery.com/eq-selector/

http://api.jquery.com/nth-child-selector/

55
Ahsan Rathod

:nth-child()セレクター：親のn番目childであるすべての要素を選択します。

:eq()セレクター：一致したセット内のインデックスnの要素を選択します。

参照： http://api.jquery.com/eq-selector/ および http://api.jquery.com/nth-child-selector/

幸運を。

13
defuz

:eq()を使用すると、jQueryオブジェクトの要素にインデックスでアクセスできます

http://api.jquery.com/eq-selector/

:nth-childを使用すると、インデックスでa要素にアクセスすることもできますが、そのすぐ左にある用語にのみ適用されます。

http://api.jquery.com/nth-child-selector/

つまり、セレクタから1つの要素を選択する場合は、：eqを使用します。選択をn-1の前に同義の要素に制限する場合は、nth-childを使用します。

JavaScript配列は通常、0からインデックス付けされます。ただし、nth-childは、jQueryのプロパティとは対照的に、技術的にはCSSプロパティであるため、1からインデックスが付けられます。

7
MikeBaker

eq（）は0で始まり、nth-child（）は1で始まります

ここで違いを明確に見てください http://jsfiddle.net/9xu2R/

0
JSantos

CSS：first-child、：nth-​​child、：last-childは、：eqとは異なります

したがって、次のようなHTMLのスニペットがある場合

<div>
    <div id="bar1" class="foo"></div>
    <div id="bar2" class="foo"></div>
    <div id="bar3" class="foo"></div>
</div>

次に、セレクタ.foo：nth-​​child（2）がdiv＃bar2と一致します。コンテナの前に別の要素を挿入すると、次のようになります。

<div>
    <p>Shift!</p>
    <div id="bar1" class="foo"></div>
    <div id="bar2" class="foo"></div>
    <div id="bar3" class="foo"></div>
</div>

再び.foo：nth-​​child（2）を選択します。コンテナーの2番目の子も.fooに一致するため、div＃bar1に一致します。

したがって、この2番目の例では、.foo：nth-​​child（1）または同等の.foo：first-childを試しても、そのコンテナの最初の子要素（pタグ）が一致しないため、どの要素にも一致しません。 .fooに一致します。

同様に、：nth-​​childは複数のコンテナ内の子と一致できます。 HTMLスニペットで：

<div>
    <p>Shift!</p>
    <div id="bar1" class="foo"></div>
    <div id="bar2" class="foo"></div>
    <div id="bar3" class="foo"></div>
</div>

<div>
     <div id="quux" class="foo"></div>
</div>

セレクタ.foo：last-childは、div＃bar3および#quuxに一致します。ただし、.foo：first-childまたは.foo：nth-​​child（1）は#quuxにのみ一致します。これは、最初のコンテナの最初の子が.fooではないためです。

ソース https://content.pivotal.io/blog/css-first-child-nth-child-and-last-child-are-not-like-eq

0
Steve Phuc

nth-childは、親オブジェクトのn番目の子を選択します。その他は、コレクション内のn番目の要素を選択します（0または1から始まるインデックスは、ほんの一部の違いです）。つまり、tr td：nth-​​child（5）とすると、すべてのtrが選択され、5番目の子が取得されます。eqはすべてのtrsのすべてのtdを取得し、5番目のtdのみを選択します。主な違いはそれです。実際、ドキュメンテーションの文言はその事実をまっすぐに指摘しておらず、黒魔術のように言葉を歪めています...

0
karadeniz
_$("#dataTable tr:nth-child(1) td:nth-child(2)").html();
_

ここでdataTableはテーブルです

_<table id="dataTable" width="50%">
    <thead>
        <th>Name</th>
        <th>EnrollNo.</th>
    </thead>
    <tbody>
        <tr>
           <td>Somdip</td><td>IT001<td>
        </tr>
        <tr>
           <td>Sanyal</td><td>IT002<td>
        </tr>
    </tbody>
</table>
_

Jqueryの_nth-child_セレクターは、このテーブルから正確なセル値をフェッチするのに役立ちます。 tr:nth-child(1)td:nth-child(2)がテーブルの1,2セルをフェッチする実際的な例。

0
somdip