子過濾器 (jQuery 7)

官網連結

目前總共有10個：
:first-child：取指定元素的第一筆，不會忽略其他元素，第一筆不是指定的元素，就抓不到
:last-child：取指定元素的最後一筆，不會忽略其他元素，最後一筆不是指定的元素，就抓不到

:first-of-type：取指定元素的第一筆，忽略其他元素，只看的到自己的元素
:last-of-type：取指定元素的最後一筆，忽略其他元素，只看的到自己的元素

:only-child：只有一個才會選中，所以才叫only，不會忽略其他元素，唯一的一筆不是指定的元素，就抓不到
:only-of-type：只有一個才會選中，所以才叫only，忽略其他元素，只看的到自己的元素


※以下4個都是從1開始，和:eq()、:gt()、:lt()從0開始不一樣
裡面可以放3種值(或者說4種)
1.數字，只取一筆
2.odd／even，也就是奇數、偶數(這個就不做範例了，第1個數字的會了，想一下就OK了)
3.公式，用「n」，表示每幾個的意思，大小寫沒差


:nth-child()：取指定元素的第x筆或(每x筆)，從前面開始找，不會忽略其他元素，第x筆或(每x筆)不是指定的元素，就抓不到
:nth-last-child()：取指定元素的第x筆或(每x筆)，從後面開始找，不會忽略其他元素，第x筆或(每x筆)不是指定的元素，就抓不到

:nth-of-type()：取指定元素的第x筆或(每x筆)，從前面開始找，忽略其他元素，只看的到自己的元素
:nth-last-of-type()：取指定元素的第x筆或(每x筆)，從後面開始找，忽略其他元素，只看的到自己的元素


※有child所有元素都看的到，有of-type只會看到指定的元素



※以下列出A~D四個HTML，測試8個子過濾器，剩下2個only，還有另外的範例

※A

<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>

※B

<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<em>E</em>

※C

<div>
    <span>A</span>
    <span>B</span>
    <span>C</span>
    <span>D</span>
    <span>E</span>
    <span>F</span>
    <span>G</span>
</div>
<div>
    <span>H</span>
    <span>I</span>
    <span>J</span>
    <span>K</span>
    <span>L</span>
</div>
<div>
    <span>M</span>
    <span>N</span>
    <span>O</span>
    <span>P</span>
    <span>Q</span>
    <span>R</span>
    <span>S</span>
</div>

※D

<div>
    <span>A</span>
    <span>B</span>
    <em>C</em>
    <span>D</span>
    <span>E</span>
    <span>F</span>
    <span>G</span>
</div>
<div>
    <span>H</span>
    <b>I</b>
    <span>J</span>
    <span>K</span>
    <span>L</span>
</div>
<div>
    <i>M</i>
    <span>N</span>
    <span>O</span>
    <span>P</span>
    <span>Q</span>
    <span>R</span>
    <span>S</span>
</div>

※:first-child／:last-child

A：
$('span:first-child')：A
$('span:last-child')：E

B：
$('span:first-child')：A
$('span:last-child')：無

C：
$('span:first-child')：AHM
$('span:last-child')：GLS

D：
$('span:first-child')：AH
$('span:last-child')：GLS

※:first-of-type／:last-of-type

A：
$('span:first-of-type')：A
$('span:last-of-type')：E

B：
$('span:first-of-type')：A
$('span:last-of-type')：D

C：
$('span:first-of-type')：AHM
$('span:last-of-type')：GLS

D：
$('span:first-of-type')：AHN
$('span:last-of-type')：GLS

※:nth-child()／:nth-last-child()

 A：
$('span:nth-child(5)')：E
$('span:nth-last-child(5)')：A

$('span:nth-child(2n)')：BD
$('span:nth-last-child(2n)')：BD

$('span:nth-child(2n-1)')：ACE
$('span:nth-last-child(2n-1)')：ACE


B：
$('span:nth-child(5)')：無，如果下面還有一行<span>F</span>，還是不會選到
$('span:nth-last-child(5)')：A，但如果下面還有一行<span>F</span>，會選到B

$('span:nth-child(2n)')：BD
$('span:nth-last-child(2n)')：BD

$('span:nth-child(2n-1)')：AC
$('span:nth-last-child(2n-1)')：AC


C：
$('span:nth-child(2)')：BIN
$('span:nth-last-child(2)')：FKR

$('span:nth-child(2n)')：BDF IK NPR
$('span:nth-last-child(2n)')：BDF IK NPR

$('span:nth-child(2n-1)')：ACEG HJL MOQS
$('span:nth-last-child(2n-1)')：ACEG HJL MOQS


D：
$('span:nth-child(2)')：BN
$('span:nth-last-child(2)')：FKR

$('span:nth-child(2n)')：BDF K NPR
$('span:nth-last-child(2n)')：BDF K NPR

$('span:nth-child(2n-1)')：AEG HJL OQS
$('span:nth-last-child(2n-1)')：AEG HJL OQS

※:nth-of-type()／:nth-last-of-type()

A：
$('span:nth-of-type(5)')：E
$('span:nth-last-of-type(5)')：A

$('span:nth-of-type(2n)')：BD
$('span:nth-last-of-type(2n)')：BD

$('span:nth-of-type(2n-1)')：ACE
$('span:nth-last-of-type(2n-1)')：ACE

B：
$('span:nth-of-type(5)')：無，但如果下面還有一行<span>F</span>，會選到F
$('span:nth-last-of-type(5)')：無，但如果下面還有一行<span>F</span>，會選到A

$('span:nth-of-type(2n)')：BD
$('span:nth-last-of-type(2n)')：AC

$('span:nth-of-type(2n-1)')：AC
$('span:nth-last-of-type(2n-1)')：BD

C：
$('span:nth-of-type(2)')：BIN
$('span:nth-last-of-type(2)')：FKR

$('span:nth-of-type(2n)')：BDF IK NPR
$('span:nth-last-of-type(2n)')：BDF IK NPR

$('span:nth-of-type(2n-1)')：ACEG HJL MOQS
$('span:nth-last-of-type(2n-1)')：ACEG HJL MOQS

D：
$('span:nth-of-type(2)')：BJO
$('span:nth-last-of-type(2)')：FKR

$('span:nth-of-type(2n)')：BEG JL OQS
$('span:nth-last-of-type(2n)')：ADF HK NPR

$('span:nth-of-type(2n-1)')：ADF HK NPR
$('span:nth-last-of-type(2n-1)')：BEG JL OQS

※:only-child／:only-of-type

※範例1

<span>A</span>

※結果：
$('span:only-child')：A，就算是多一行<br />或者兩個span，中間空一格，也抓不到
但如果用<div>、<p>…等包起來就可以

$('span:only-of-type')：A，多一行<br />也可以，它只認span，所以兩個span才不行，
當然用<div>、<p>…等包起來還是可以

※範例2

<em>A</em>
<span>B</span>
<b>C</b>

※結果：
$('span:only-child')：無
$('span:only-of-type')：B

※範例3

<div>
    <span>A</span>
    <span>B</span>
</div>
<div>
    <span>C</span>
</div>
<div>
    <span>D</span>
    <span>E</span>
    <span>F</span>
</div>
<div>
    <span>G</span>
</div>

※結果：
$('span:only-child')：CG
$('span:only-of-type')：CG

※範例4

<div>
    <span>A</span>
    <span>B</span>
</div>
<div>
    <span>C</span>
</div>
<div>
    <em>D</em>
    <span>E</span>
    <b>F</b>
</div>
<div>
    <span>G</span>
</div>

※結果：
$('span:only-child')：CG
$('span:only-of-type')：CEG