jqueryインデックスセレクタ

$(‘:eq(index)’)
$(':eq(index)')セレクタは、インデックスがindexに等しい要素を選択し(indexは0から)、単一の要素インデックスを返します.
[注意]インデックス・セレクタのインデックスとサブエレメント・セレクタのインデックスには明らかな違いがあります.
1)インデックスセレクタインデックスは0から、サブエレメントセレクタインデックスは1から
2)索引セレクタの索引は指定された要素の索引であり、サブ要素セレクタの索引はすべてのサブ要素の索引である

<div>
    <i>0i>
    <span>1span>
    <i>2i>
    <span>3span>
div>

1要素を選択する場合、サブ要素セレクタを使用する場合は

//      div          ，      span  (   1  )
$('div span:nth-child(2)').css('color','red');

索引セレクタを使用すると、

//      div         span  (   0  )
$('div span:eq(0)').css('color','blue');

<button id='btn1'>$('div span:nth-child(2)')button>
<button id='btn2'>$('div span:eq(0)')button>
<div>
    <i>0i>
    <span>1span>
    <i>2i>
    <span>3span>
div>
<script>
btn1.onclick = function(){
    $('div span:nth-child(2)').css('color','red');
}
btn2.onclick = function(){
    $('div span:eq(0)').css('color','blue');
}
script>

:nth-child(n)セレクタを使用して上記のコードの1要素を選択する場合は、

div span:nth-child(2){color:red;}

:nth-of-type(n)セレクタを使用すると、次のように設定されます.

div span:nth-of-type(1){color:blue;}

だからCSSセレクタ:nth-of-type(n)とjQueryのインデックスセレクタ
(':eq(index)')は似ていますが、同じところがインデックスというのは指定された要素のインデックスで違いが2箇所あります1)CSSセレクタ:nth−of−type(n)のインデックスは1から始まり、jQueryのインデックスセレクタ(':e q(i n d e x)')は似ています.同じところがインデックスとは指定された要素のインデックスであるが異なる点は2つある1)C Sセレクタ:nt h−o f−t y p e(n)のインデックスは1から始まり,j Q u e r yのインデックスセレクタ(':eq(index)')のインデックスは0から2)CSSセレクタ:nth−of−type(n)は複数の要素を返し,jQueryのインデックスセレクタ$(':eq(index)')は、単一の要素を返します.

$(':eq(0)') //         0   

$('span:eq(0)') //         0 span  

$('div span:eq(0)') //     div           0 span  

<button id="btn1" style="color: red;">$(':eq(0)')button>
<button id="btn2" style="color: blue;">$('span:eq(0)')button>
<button id="btn3" style="color: green;">$('div span:eq(0)')button>
<button id="reset">  button>
<p id="t1">
    <i>1.0i>
    <span>1.1span>
p>
<p  id="t2">
    <span>2.0span>
    <i>2.1i>
p>
<div id="t3">
    <i>3.0i>
    <span>3.1span>
div>
<script>
reset.onclick = function(){history.go();}
//         0   ，   。          ，                 
btn1.onclick = function(){$(':eq(0)').css('color','red');}

//         0 span  ，   1.1
btn2.onclick = function(){$('span:eq(0)').css('color','blue');}

//     div           0 span  ，   3.1
btn3.onclick = function(){$('div span:eq(0)').css('color','green');}
script>

最初と最後の索引要素セレクタ
便宜上、jQueryは、最初のインデックス要素と最後のインデックス要素の取得方法も定義します.
$(‘:first’)
$(':first')セレクタは、最初に表示される1番目のインデックス要素を選択し、単一の要素を返します.
$(‘:last’)
$(':last')セレクタは、最後に表示された最後のインデックス要素を選択し、単一の要素を返します.

<button id="btn1" style="color: red;">$('div :first')button>
<button id="btn2" style="color: blue;">$('div :last')button>
<button id="btn3" style="color: green;">$('div span:first')button>
<button id="btn4" style="color: pink;">$('div span:last')button>
<button id="reset">  button>
<div id="t1">
    <i>1.1i>
    <span>1.2span>
div>
<p  id="t2">
    <span>2.1span>
    <i>2.2i>
p>
<div id="t3">
    <span>3.1span>
    <i>3.2i>
div>
<script src="jquery-3.1.0.js">script>
<script>
reset.onclick = function(){history.go();}
//           div    1     ，   1.1
btn1.onclick = function(){$('div :first').css('color','red');}

//           div     1     ，   3.2
btn2.onclick = function(){$('div :last').css('color','blue');}

//           div    1 span    ，   1.2
btn3.onclick = function(){$('div span:first').css('color','green');}

//           div     1 span    ，   3.1
btn4.onclick = function(){$('div span:last').css('color','pink');}
script>

先頭インデックスセレクタは、CSSのfirst-of-typeおよび:last-of-typeには対応しません.最初と最後のインデックス・セレクタは単一の要素のみを選択するため、CSSセレクタは複数の要素を選択します.
javascriptを使用して$(‘div span:last’)を実装する場合.css(‘color’,‘pink’)の機能

var divs = document.getElementsByTagName('div');
for(var i = divs.length-1; i>-1;i--){
    var spans = divs[i].getElementsByTagName('span');
    if(spans){
        spans[spans.length-1].style.color = 'pink';
        break;
    }    
}

パリティ索引要素セレクタ
前に説明したeq(index)、:firstおよび:last以外のインデックス要素セレクタは、集合要素を返します.次に、パリティインデックス要素セレクタについて説明します.
:even:even選択インデックスが偶数のすべての要素、戻り集合要素:odd:odd選択インデックスが奇数のすべての要素、戻り集合要素

<button id="btn1" style="color: red;">$('div :even')button>
<button id="btn2" style="color: blue;">$('div :odd')button>
<button id="btn3" style="color: green;">$('div span:even')button>
<button id="btn4" style="color: pink;">$('div span:odd')button>
<button id="reset">  button>
<div>
    <span>0:span0span>
    <span>1:span1span>
    <span>2:span2span>
    <i>3:i0i>
    <i>4:i1i>
    <i>5:i2i>
    <span>6:span3span>
    <span>7:span4span>
div>
<script>
reset.onclick = function(){history.go();}
//      div           ，     0、2、4、6
btn1.onclick = function(){$('div :even').css('color','red');}

//      div           ，     1、3、5
btn2.onclick = function(){$('div :odd').css('color','blue');}

//      div   span          ，     0、2、7
btn3.onclick = function(){$('div span:even').css('color','green');}

//      div   span          ，     1、6
btn4.onclick = function(){$('div span:odd').css('color','pink');}
script>

サブエレメントフィルタセレクタにも、nth−child(even)およびnth−child(odd)のようなパリティセレクタが存在する.インデックスの開始が異なるため、インデックスの表示も異なるため、類似の表示では結果が異なります.

<button id="btn1" style="color: red;">$('div :nth-child(even)')button>
<button id="btn2" style="color: blue;">$('div :nth-child(odd)')button>
<button id="btn3" style="color: green;">$('div span:nth-child(even)')button>
<button id="btn4" style="color: pink;">$('div span:nth-child(odd)')button>
<button id="reset">  button>
<div>
    <span>0:span0span>
    <span>1:span1span>
    <span>2:span2span>
    <i>3:i0i>
    <i>4:i1i>
    <i>5:i2i>
    <span>6:span3span>
    <span>7:span4span>
div>
<script>
reset.onclick = function(){history.go();}
//      div           ，      1   ，     1、3、5、7(      2、4、6、8)
btn1.onclick = function(){$('div :nth-child(even)').css('color','red');}

//      div           ，      1   ，     0、2、4、6(      1、3、5、7)
btn2.onclick = function(){$('div :nth-child(odd)').css('color','blue');}

//      div           ，     span  ，     1、5(      2、6)
btn3.onclick = function(){$('div span:nth-child(even)').css('color','green');}

//      div           ，     span  ，     0、2、6(      1、3、7)
btn4.onclick = function(){$('div span:nth-child(odd)').css('color','pink');}
script>

範囲インデックス要素セレクタ
:lt(index):lt(index)セレクタindexよりインデックスの小さい要素を選択し、集合要素を返します:gt(index):gt(index)セレクタindexよりインデックスの大きい要素を選択し、集合要素を返します.

<button id="btn1" style="color: red;">$('div :lt(4)')button>
<button id="btn2" style="color: blue;">$('div span:lt(4)')button>
<button id="btn3" style="color: green;">$('div gt(3)')button>
<button id="btn4" style="color: pink;">$('div span:gt(3)')button>
<button id="reset">  button>
<div>
    <span>0:span0span>
    <span>1:span1span>
    <span>2:span2span>
    <i>3:i0i>
    <i>4:i1i>
    <i>5:i2i>
    <span>6:span3span>
    <span>7:span4span>
div>
<script>
reset.onclick = function(){history.go();}
//      div       4   ，     0、1、2、3
btn1.onclick = function(){$('div :lt(4)').css('color','red');}

//      div   span       4   ，     0、1、2、6
btn2.onclick = function(){$('div span:lt(4)').css('color','blue');}

//      div       1   ，     2、3、4、5、6、7
btn3.onclick = function(){$('div :gt(1)').css('color','green');}

//      div   span       1   ，     2、6、7
btn4.onclick = function(){$('div span:gt(1)').css('color','pink');}
script>