jQuery子元素過濾器


名稱說明#範例
:nth -child(index/even/odd/equation)

符合其父元素下的第N個子或奇偶元素

':eq(index)' 只符合一個元素,而這個將為每一個父元素匹配子元素。 :nth-child從1開始的,而:eq()是從0算起的!

可以使用: 
nth-child(even) 
:nth-child(odd) 
:nth-child(3n) 
:nth-child(2) 
:nth-child(3n+1) 
:nth-child(3n+2)

在每個ul 找出第2 個li: 
$("ul li: nth-child(2)")
:first-child

#符合第一個子元素

':first' 只符合一個元素,而此選擇符將為每個父元素匹配一個子元素

在每個ul 中尋找第一個li: 
$("ul li:first-child ")
:last-child

符合最後一個子元素

':last'只符合一個元素,而此選擇符將為每個父元素匹配一個子元素


在每個ul 中找到最後一個li: 
$("ul li:last- child")
:only-child

如果某個元素是父親元素中唯一的子元素,那將會被符合

如果父元素中含有其他元素,那將不會被符合。


在ul 中尋找是唯一子元素的li: 
$("ul li:only-child")


註:

1、:nth-child(index)從1開始的,而eq(index)是從0開始的,就是說  $(" ul li:nth-child(0)").css("color","re​​d")是取得不到相符的元素,只能從1開始,即  $("ul li:nth-child(1) ").css("color","re​​d"),而eq(0)可以獲得,同樣都是獲得第一個子元素

    :nth-child(even)是獲得偶數子元素,即第二個,第四個,第六個...,而:even則是從索引0開始,匹配第二個索引,第四個索引...,也就是第一個,第三個,第五個...,看起來像都是獲得奇數項,同樣:nth-child(odd)和:odd同樣也是如此 

2、   :first-child配對每個父類別的子元素,而:first則是匹配一個子元素, :last-child和last也是這樣

3、only-child:匹配某個元素是父親元素中唯一的子元素,就是說當前子元素是類別中唯一的元素,則符合!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        jQuery(function($){
            //  $("ul li:first-child").css("color","red");
            $("ul li:first").css("color","red");
            // $("ul li:last-child").css("color","red");
            // $("ul li:nth-child(even)").css("color","red");
            // $("ul li:odd").css("color","red");
        })
    </script>
</head>
<body>
<form id="form1" runat="server">
    <div>
        <ul>
            <li>第一个元素</li>
            <li>第二个元素</li>
            <li>第三个元素</li>
            <li>第四个元素</li>
            <li>第五个元素</li>
            <li>第六个元素</li>
        </ul>
        <ul>
            <li>第一个元素</li>
            <li>第二个元素</li>
            <li>第三个元素</li>
            <li>第四个元素</li>
            <li>第五个元素</li>
            <li>第六个元素</li>
        </ul>
    </div>
</form>
</body>
</html>


#
繼續學習
||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>无标题页</title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <script> $(function(){ // 1选取父元素下索引值是偶数的子元素的索引值(索引值从1开始的) //找到当前元素的父元素,在找他下面的子元素 $("span.child:nth-child(even)").css("fontSize","30px"); //2选取父元素下,索引值是奇数的元素(索引值从1开始) $("span.child:nth-child(odd)").css("color","red"); //3匹配每个父元素下,索引值为xx的子元素,索引从1开始 $("span.child:nth-child(1)").css("color","blue"); //4匹配每个父元素的第一个子元素 $("span.child:first-child").css("fontSize","50px"); //5匹配每个父元素的第一个子元素 $("span.child:last-child").css("fontSize","50px"); }) </script> <body> <div class="parent"> <span class="child">1</span> <span class="child">2</span> <span class="child">3</span> <span class="child">4</span> <span class="child">5</span> </div> </body> </html>