❤️$(obj).index(this)与$(this).index()的区别

小明的学习圈子2023-08-13前端总结

$(obj).index(this)与$(this).index()的区别

$(this).index()在使用jQuery编写选项卡及轮播图等特效时经常用到,$(obj).index(this)却不常见。

为便于理解,以下分两个使用场景加以分析。

测试一: 同级元素标签相同

    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
        <li>55</li>
    </ul>
<script>
    //$(this).index() 测试代码一
    $("li").on("click",function(){
        var index = $(this).index();
        console.log(index); // 依次点击li元素输出: 0,1,2,3,4
    })
    // $(obj).index(this) 测试代码二
    $("li").on("click",function(){
        var index = $("li").index(this);
        console.log(index); // 依次点击li元素输出: 0,1,2,3,4
	}) 
</script>

执行两段脚本并依次点击li元素,都是输出: 0/1/2/3/4,在这个场景下,作用一样。

测试二:同级元素标签不相同

    <div>
        <p>this is p</p>
        <p>this is p</p>
        <b>this is b</b>
        <b>this is b</b>
    </div>
<script>
    //$(this).index() 测试代码一
    $("b").on("click",function(){
        var index = $(this).index();
        console.log(index); // 依次点击b元素输出:2,3
    })
    //$(obj).index(this) 测试代码二
    $("b").on("click",function(){
        var index = $("b").index(this);
        console.log(index); // 依次点击b元素输出:2,3
    })
</script>

测试代码一中,index()是元素在当前同级元素中的位置下标,不区分标签;

测试代码二中,返回值是当前操作元素(this)在$("b")集合中的下标。($( "b" )是jQuery对象集合,所以非同级元素也可以使用,有兴趣自己可以测试)

Last Updated 2024/4/6 10:47:15