深入學習jQuery選擇器系列第八篇——過濾選擇器之偽子元素選擇器

文章出處

前面的話

　　本文是子元素選擇器的續篇，主要介紹關于nth-of-type()選擇器的內容。該部分內容并非沒有出現在《鋒利的jQuery》一書中，nth-of-type()選擇器參照CSS中的nth-of-type選擇器，于1.9版本新增，本文將詳細介紹該內容

通用形式

:nth-of-type()

　　個人認為，:nth-of-type()選擇器不應該歸類于子元素選擇器，也不完全等同索引選擇器，因為其索引是指特定元素的索引，但索引是從1開始的，而且返回的是集合元素。所以，我把其稱之為偽子元素選擇器

$('div span:nth-of-type(2)').css('color','red');

　　對應于CSS的:nth-of-type()選擇器

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

　　如果使用javascript實現類似效果

var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++){
    var span2 = divs[i].getElementsByTagName('span')[1];
    if(span2){
        span2.style.color = 'red';
    }
}

<button id='btn1' style="color:red">$('div span:nth-of-type(2)')</button>
<button id='btn2' style="color:blue">$('div span:nth-child(2)')</button>
<button id='btn3' style="color:green">$('div span:eq(1)')</button>
<button id="reset">還原</button>
<div>
    <i>1.1</i>
    <span>1.2</span>
    <span>1.3</span>    
</div>
<div>
    <i>2.1</i>
    <span>2.2</span>
    <span>2.3</span>
</div>
<script>
reset.onclick = function(){history.go();}
btn1.onclick = function(){
    //選擇所有父元素為div元素的第2個出現的span元素，所以結果為1.3、2.3
    $('div span:nth-of-type(2)').css('color','red');
}
btn2.onclick = function(){
    //選擇所有父元素為div元素的第2個子元素，且該子元素是span元素，所以結果是1.2、2.2
    $('div span:nth-child(2)').css('color','blue');
}
btn3.onclick = function(){
    //選擇首次出現的父元素為div元素的第1個出現的span元素(索引從0開始)，所以結果是1.3
    $('div span:eq(1)').css('color','green');
}
</script>

　　當然$(':nth-of-type(index)')選擇器作為通用形式，可以有多種參數選擇

　　【1】$(':nth-of-type(even)') 選取所有索引值為偶數的元素

　　【2】$(':nth-of-type(odd)') 選取所有索引值為奇數的元素

　　【3】$(':nth-of-type(3n+1)') 選取所有索引值為(3n+1)的元素

<button id="btn1" style="color: red;">$(':nth-of-type(even)')</button>
<button id="btn2" style="color: blue;">$(':nth-of-type(odd)')</button>
<button id="btn3" style="color: green;">$(':nth-of-type(3n+1)')</button>
<button id="reset">還原</button>
<div>
    <i>1</i>
    <span>2</span>
    <span>3</span>    
    <i>4</i>
    <span>5</span>
    <span>6</span>
</div>
<script src="jquery-3.1.0.js"></script>
<script>
reset.onclick = function(){history.go();}
//匹配每個父元素為div的索引為偶數的元素，結果是3(第2個span)、6(第4個span)、4(第2個i)
btn1.onclick = function(){$('div :nth-of-type(even)').css('color','red');}

//匹配每個父元素為div的索引為奇數的元素，結果是1(第1個i)、2(第1個span)、5(第3個span)
btn2.onclick = function(){$('div :nth-of-type(odd)').css('color','blue');}

//匹配每個父元素為div的索引為(3n+1)的元素，索引可以是1、4。所以結果是1(第1個i)、2(第1個span)、6(第4個span)
btn3.onclick = function(){$('div :nth-of-type(3n+1)').css('color','green');}
</script>

反向形式

:nth-last-of-type()

　　:nth-last-of-type()選擇器選擇所有第n個元素，但計數從最后一個元素到第一個

$('div :nth-last-of-type(even)').css('color','red');

　　對應的CSS選擇器是:nth-last-of-type()

div :nth-last-of-type(even){color:red;}

　　如果使用javascript實現類似效果

var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++){
    var children = divs[i].children;
    var lastName = '';
    //從后往前數
    for(var j = children.length; j > -1; j--){
        //標簽第一次出現或奇數次出現
        if(children[j].nodeName != lastName){
            children[j].style.color = 'red';
            lastName = children[j].nodeName;
        //標簽第二次出現或偶數次出現
        }else{
            lastName = '';
        }
    }
}

<button id="btn1" style="color: red;">$(':nth-last-of-type(even)')</button>
<button id="btn2" style="color: blue;">$(':nth-last-of-type(odd)')</button>
<button id="btn3" style="color: green;">$(':nth-last-of-type(3n+1)')</button>
<button id="reset">還原</button>
<div>
    <i>1</i>
    <span>2</span>
    <span>3</span>    
    <i>4</i>
    <span>5</span>
    <span>6</span>
</div>
<script src="jquery-3.1.0.js"></script>
<script>
reset.onclick = function(){history.go();}
//匹配每個父元素為div的索引為偶數的元素(從后往前數)，結果是5(倒數第2個span)、2(倒數第4個span)、1(倒數第2個i)
btn1.onclick = function(){$('div :nth-last-of-type(even)').css('color','red');}

//匹配每個父元素為div的索引為奇數的元素(從后往前數)，結果是4(倒數第1個i)、6(倒數第1個span)、3(倒數第3個span)
btn2.onclick = function(){$('div :nth-last-of-type(odd)').css('color','blue');}

//匹配每個父元素為div的索引為(3n+1)的元素(從后往前數)，索引可以是1、4(從后往前數)。所以結果是4(倒數第1個i)、6(倒數第1個span)、2(倒數第4個span)
btn3.onclick = function(){$('div :nth-last-of-type(3n+1)').css('color','green');}
</script>

首尾元素

$(':first-of-type')

　　:first-of-type選擇器是:nth-of-type(1)選擇器的簡寫形式，選取所有相同元素中的首個元素

$(':last-of-type')

　　類似地，$(':last-of-type')選擇器選取所有相同元素中的最后一個元素

<button id="btn1" style="color: red;">$('div :first-of-type')</button>
<button id="btn2" style="color: blue;">$('div :last-of-type')</button>
<button id="btn3" style="color: green;">$('div span:first-of-type')</button>
<button id="btn4" style="color: pink;">$('div span:last-of-type')</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、1.2、3.1、3.2
btn1.onclick = function(){$('div :first-of-type').css('color','red');}

//匹配每個div元素為父元素的索引為1的元素(從后向前數)，結果同上
btn2.onclick = function(){$('div :last-of-type').css('color','blue');}

//匹配每個div元素為父元素的索引為1的span元素，結果是1.2、3.1
btn3.onclick = function(){$('div span:first-of-type').css('color','green');}

//匹配每個div元素為父元素的索引為1的span元素(從后向前數)，結果是同上
btn4.onclick = function(){$('div span:last-of-type').css('color','pink');}
</script>

　　首尾偽子元素選擇器分別對應于CSS中的:first-of-type和:last-of-type

　　如果要完成同樣的功能，選擇器格式分別為：

div :first-of-type{color:red;}

div :last-of-type{color:blue;}

div span:first-of-type{color:green;}

div span:last-of-type{color:pink;}

　　如果使用javascript選擇器要完成上面的最后一個功能，則如下所示

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

唯一元素

:only-of-type()

　　:only-of-type()選擇器選擇出所有沒有具有相同名稱的兄弟元素的元素

$('div span:only-of-type').css('color','green');

　　對應于CSS的:only-of-type選擇器

div span:only-of-type{color:green;}

　　如果使用javascript實現，則如下所示

var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++){
    var spans = divs[i].getElementsByTagName('span');
    if(spans.length == 1){
        divs[i].spans[0].color = 'green';
    }
}

<button id="btn1" style="color: green;">$('div span:only-of-type')</button>
<button id="reset">還原</button>
<div>
    <span>1.1</span>
    <span>1.2</span>
    <i>1.3</i>
</div>
<div>
    <span>2.1</span>
    <i>2.2</i>
</div>
<script src="jquery-3.1.0.js"></script>
<script>
reset.onclick = function(){history.go();}
//第2個div中只存在一個<span>元素，所以結果是2.1
btn1.onclick = function(){$('div span:only-of-type').css('color','green');}
</script>