子元素過濾器nth-child解釋

jQuery中的子元素過濾器nth-child是指:選取每一個父元素下的第index個子元素或者奇偶元素(index從1算起)對象

這裏有幾點要注意:filter

1. index 從1開始算di

2. 過濾器filter是對操做對象的過濾。ps

3. nth-child只對第一層子元素,不會過濾孫子輩及如下 index

4. nth-child執行過程以下:

<div id="1">

    <div id="1-1">

        <div id="1-1-1"></div>

    <div id="1-1-2"></div>

    </div>

    <div id="1-2">

        <div id="1-2-1"></div>

        <div id="1-2-2"></div>

    </div>

</div>

<div id="2">

</div>

$(div:nth-child(2)),結果是1-2, 1-1-2, 1-2-2

解析:按照div選擇器的結果爲:

1, 1-1, 1-1-1, 1-1-2, 1-2, 1-2-1, 1-2-2, 2

而後執行nth-child(2)是對上述的每一個div進行過濾。

首先看1, 有兩個子元素1-1,1-2,因此1-2被選中

而後1-1, 有兩個子元素1-1-1, 1-1-2, 全部1-2-2被選中

1-1-1,無子元素,pass

1-1-2, 無子元素,pass

1-2,有兩個子元素1-2-1,1-2-2,因此1-2-2被選中

1-2-1, 無子元素,pass

1-2-2, 無子元素,pss

2,無子元素,pass

相關文章
相關標籤/搜索