jQuery中獲取特定順序子元素（子元素種類不定）的方法

提出問題：只已知父元素和父元素中子元素的次序，怎么通過jQuery方法獲得該元素？

    <p>第一部分：</p>
    <ul>
        <li>1</li>
        <li>2</li> // 選擇這個子元素
        <li>3</li>
    </ul>
    <p>第二部分：</p>
    <ul>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

在不通過選擇器的情況下(:first,:last,:nth-child()等)，如何通過父元素來選擇特定次序的子元素呢？

方法一：eq(n)

$("ul").children().eq(1).css("backgroundColor","blue");

或者$("ul").children().eq(-5).css("backgroundColor","blue");

 

方法二：get(n)--注意得到的DOM對象還是jQuery對象

直接用get()方法得到是DOM對象：

$("ul").children().get(1).style.backgroundColor = "yellow";

或者$("ul").children()[1].style.backgroundColor = "yellow";

將get()得到的DOM對象轉化為jQuery對象：

$($("ul").children().get(1)).css("backgroundColor","yellow");

方法三：slice(m,n)

$("ul").children().slice(1,2).css("backgroundColor","green");

或者$("ul").children().slice(-5,-4).css("backgroundColor","green");

 

 

小結：以上三種方法eq(n),get(n),slice(m,n)中，m,n均可正可負，以便選取特定元素。其中slice(m,n)功能更為強大，可選取一定范圍內的元素。

選取最后3個：

$("ul").children().slice(3,6).css("backgroundColor","green");

或者$("ul").children().slice(-3).css("backgroundColor","green");

最后一點補充：若選取第一個或者最后一個子元素可用first()、last()方法。