您好,欢迎来到刀刀网。
搜索
您的当前位置:首页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>

运行结果图如下:


因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- gamedaodao.com 版权所有 湘ICP备2022005869号-6

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务