jQuery index() 方法的两种用法

Posted 2020-08-07

介绍：

index() 方法返回指定元素相对于其他指定元素的 index 位置。index()的返回值是一个Number类型，从0开始计数。

语法：

$(selector).index(element)

注释：

selector可选。规定要获得 index 位置的元素。可以是 DOM 元素或 jQuery 选择器。

  用法：

    1、如果不传递任何参数给 .index() 方法，则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置。

    例子：

　 html代码：

    <ul>
        <li>这是第0个列表</li>
        <li>这是第1个列表</li>
        <li>这是第2个列表</li>
        <li>这是第3个列表</li>
        <li>这是第4个列表</li>
    </ul>

　　jquery代码：

    $(function(){
        $(‘ul li‘).click(function(){
            var index=$(this).index();
            alert(index);
        })
    })

　  运行结果：点击列表项可获得每个列表项相对于其他列表项的位置，例如点击第1个列表，会弹出如下图的对话框

 

 

 　  2.index()传递参数，index()方法表示获得元素相对于选择器的 index 位置。

    例子：

　　html代码：

    <ul>
        <li class="list1">这是第0个列表</li>
        <li class=‘list1‘>这是第1个列表</li>
        <li>这是第2个列表</li>
        <li class=‘list1‘>这是第3个列表</li>
        <li>这是第4个列表</li>
    </ul>

 jquery代码：

    $(function(){
        $(‘.list1‘).click(function(){
            var index=$(this).index(‘.list1‘);
            alert(index);
        })
    })

 运行结果：点击含有list1的列表项弹出当前点击元素相对于list1的位置。比如点击第一个list1会弹出如下结果：