JQuery_JQueryセレクタ(:nth-child(n))詳細

jQueryの:nth-child(n)セレクタは、親要素の下のn番目(または特定の順序の)サブ要素である要素を一致させ、jQueryオブジェクトとしてカプセル化して返します.
このセレクタに対してnth-last-child(n)セレクタは、親要素としての最後からn番目(または特定の逆数順序に合致する)のサブ要素をマッチングするために使用される.
注:nth-child(n)セレクタと:eq(index)セレクタの違いは、eq(index)セレクタが1つの要素にのみ一致し、一致するすべての要素のindex + 1番目の要素であることです(インデックスindexは0から計算されます).nth−child(n)セレクタは、一致する要素が親要素のn番目のサブ要素であるか、または他の特定の要件(シーケンス番号nは1から計算)に合致しているかを判断する必要があり、そうでなければ破棄される.
構文
jQuery1.1.4セレクタを追加します.

//    selector        
//    n                 
jQuery( "selector:nth-child(n)" )

パラメータ
パラメータ
説明
selector
有効なセレクタです.
n
指定したシーケンス番号は、1からカウントされます.
パラメータnは一般に自然数であり、親要素としてのn番目のサブ要素を表す.たとえば、nth-child(2)は、親要素として2番目のサブ要素を表します.
パラメータnは、特定の式であってもよい(式ではアルファベットnのみが自然数を表し、大文字と小文字が可能である).例:
:nth-child(odd)は、親要素である奇数(第1、3、5、7......個)の子要素に一致する要素を表す.
:nth-child(even)は、親要素である偶数(2、4、6、8......個)の子要素に一致する要素を表す.
:nth-child(3 n)は、親要素である3n番目のサブ要素に一致する要素を表す(nは0を含む自然数を表し、以下同).
:nth-child(3 n+1)は、親要素である3n+1番目のサブ要素に一致する要素を表す.
:nth-child(3 n+2)は、親要素である3n+2番目のサブ要素に一致する要素を表す.
戻り値
一致する要素をカプセル化したjQueryオブジェクトを返します.
該当する一致が見つからない場合は、空のjQueryオブジェクトが返されます.
jQueryは、セレクタselectorに従って一致するすべての要素を検索し、親要素の指定された順序に合致するサブ要素であるかどうかを確認し、もしそうであれば保持し、そうでなければその要素を破棄する.
注意事項
注意(1):

$(".listTable tr :nth-child(1)").hide();	（   ）   

と

$(".listTable tr th:nth-child(1)").toggle();  （    ）
$(".listTable tr td:nth-child(1)").toggle(); //   0       ，1000 1           

二つの書き方の意味は違いますが、
一つ目は

.listTable tr      (tr,td )  :nth-child(1)     。     tr  th,td   nth-child(i)

2つ目は

.listTable tr td:nth-child(1) td        :nth-child(1)      ，   td      nth     td     。

注意(2):
DOMでget(i),iの下付きは0から始まる.

$("p").get(0);

示例&说明

以下面这段HTML代码为例：

<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4" class="c">item1</li>
            <li id="n5">item2</li>
            <li id="n6" class="c">item3</li>
        </ul>
    </div>
    <div id="n7">
        <ul id="n8">
            <li id="n9">item1</li>
            <li id="n10">item2</li>
        </ul>
    </div>
</div>

次に、各ulタグ内の2番目のliタグを検索するには、次のjQueryコードを記述します.

//    id   n5、n10     
$("ul li:nth-child(2)");

次に、ulタグごとに自然順序が奇数のliタグを検索すると、以下のjQueryコードを記述することができる.

//    id   n4、n6、n9 3   
$("ul li:nth-child(odd)");

各ul親ラベルの自然順序3nのliラベルを検索します.対応するjQueryコードは次のとおりです.

//    id n6     
//       #n1    ，   jQuery          #n1 li   ，                3n   ，      ，      。
$("#n1 li:nth-child(3n)");

クラス名cを含むすべてのliラベルを検索し、親要素の偶数順序のサブ要素でなければなりません.次のjQueryコードを記述できます.

//         ，    jQuery  
//     li.c  n4、n6    ，                  ，      
$("li.c:nth-child(even)");