jQuery獲取當前元素是該父元素的第幾個元素&獲取父元素的第n個子元素
阿新 • • 發佈:2019-01-11
示例程式碼:
一、jQuery獲取當前元素是該父元素的第幾個元素
index() 方法返回指定元素相對於其他指定元素的 index 位置。
這些元素可通過 jQuery 選擇器或 DOM 元素來指定。
註釋:如果未找到元素,index() 將返回 -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>
執行結果圖如下: