你的位置:首页 > Java教程

[Java教程]jQuery index() 方法的两种用法


介绍:

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会弹出如下结果: