1. 程式人生 > >jQuery獲取當前元素是該父元素的第幾個元素&獲取父元素的第n個子元素

jQuery獲取當前元素是該父元素的第幾個元素&獲取父元素的第n個子元素

示例程式碼:
<div class="demo">
    <ul>
        <li>第一個元素</li>
        <li>第二個元素</li>
        <li>第三個元素</li>
        <li>第四個元素</li>
    </ul>
</div>

一、jQuery獲取當前元素是該父元素的第幾個元素
index() 方法返回指定元素相對於其他指定元素的 index 位置。
這些元素可通過 jQuery 選擇器或 DOM 元素來指定。
註釋:如果未找到元素,index() 將返回 -1
<script>
$(function(){
    $(".demo ul li").click(function(){
        var index=$(".demo ul li").index(this);
        console.log("當前下標為:"+index);   //注意:這裡的下標從零開始
    });
});
</script>

二、jQuery獲取父元素的第n個子元素
jQuery有多種方式獲取父元素的第n個子元素,具體方法如下所示:
<script>
$(function(){
    var val1=$(".demo ul li:nth-child(1)").text();   //注意:這裡的下標從一開始,或者使用:first-child
    console.log(val1);

    var val2=$(".demo ul li:first-child").text();
    console.log(val2);

    var val3=$(".demo ul li").first().text();    //注意:這裡的方法只有first()和last()
    console.log(val3);

    var val4=$(".demo ul").find("li").get(0);    //注意:這裡的下標從零開始
    console.log($(val4).text());

    var val5=$(".demo ul li").eq(0).text();
    console.log(val5);
});
</script>

執行結果圖如下: