深入學習jQuery選擇器系列第三篇——過濾選擇器之索引選擇器
阿新 • • 發佈：2018-12-26
通用形式
$(':eq(index)')
$(':eq(index)')選擇器選擇索引等於index的元素(index從0開始)，返回單個元素
索引
[注意]索引選擇器的索引和子元素選擇器的索引有明顯的不同
【1】索引選擇器索引從0開始，而子元素選擇器索引從1開始
【2】索引選擇器的索引是指定元素的索引，而子元素選擇器的索引是所有子元素的索引
<div>
<i>0</i>
<span>1</span>
<i>2</i>
<span>3</span>
</div>如果要選擇<span>1<span>元素，若使用子元素選擇器，則設定為
//選擇父元素為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>0</i>
<span>1</span>
<i>2</i>
<span>3</span>
</div>
<script>
btn1.onclick 在CSS中，與:nth-child(n)選擇器相似的選擇器是:nth-of-type(n)，:nth-of-type(n)選擇器返回索引等於n的元素(索引從1開始)
如果要使用:nth-child(n)選擇器選擇上述程式碼中的<span>1<span>元素，則設定為
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)')相似，相同的地方是索引是指的指定元素的索引
而不同之處有兩處
【1】CSS選擇器:nth-of-type(n)的索引從1開始，而jQuery中的索引選擇器$(':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.0</i>
<span>1.1</span>
</p>
<p id="t2">
<span>2.0</span>
<i>2.1</i>
</p>
<div id="t3">
<i>3.0</i>
<span>3.1</span>
</div>
<script>
reset.onclick = function(){history.go();}
//選擇第一個索引等於0的元素，結果為<html>。由於字型顏色可以繼承，所以所有的子元素的字型顏色都是紅色
btn1.onclick = function(){$(':eq(0)').css('color','red');}
//選擇第一個索引等於0的span元素，結果為<span>1.1</span>
btn2.onclick = function(){$('span:eq(0)').css('color','blue');}
//選擇第一個div元素為父元素下索引等於0的span元素，結果是<span>3.1</span>
btn3.onclick = function(){$('div span:eq(0)').css('color','green');}
</script>首尾索引元素選擇器
為了方便，jQuery還定義了第一個索引元素和最後一個索引元素的獲取方式
$(':first')
$(':first')選擇器選擇最先出現的第1個索引元素，返回單個元素
$(':last')
$(':last')選擇器選擇最後出現的最後1個索引元素，返回單個元素
<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.1</i> <span>1.2</span> </div> <p id="t2"> <span>2.1</span> <i>2.2</i> </p> <div id="t3"> <span>3.1</span> <i>3.2</i> </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:span0</span>
<span>1:span1</span>
<span>2:span2</span>
<i>3:i0</i>
<i>4:i1</i>
<i>5:i2</i>
<span>6:span3</span>
<span>7:span4</span>
</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:span0</span>
<span>1:span1</span>
<span>2:span2</span>
<i>3:i0</i>
<i>4:i1</i>
<i>5:i2</i>
<span>6:span3</span>
<span>7:span4</span>
</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:span0</span> <span>1:span1</span> <span>2:span2</span> <i>3:i0</i> <i>4:i1</i> <i>5:i2</i> <span>6:span3</span> <span>7:span4</span> </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>