jQuery获取当前元素是该父元素的第几个元素&获取父元素的第n个子元素？

2023-08-21 12:34•java•阅读 3433

<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>