jQuery中index()方法用法实例

概述

在jQuery中，index()方法可以用于获取匹配元素在同级元素中的位置，即获取元素在兄弟节点中的索引值（从0开始计数）。如果没有传入参数，则返回第一个匹配元素在其同级元素中的位置，如果传入参数，则返回匹配参数的索引值。

方法语法

index()方法有两种语法：
* $(selector).index()
* $(selector).index(element)

参数说明

• 当不传参时，返回元素在其父元素中所有同级元素中的位置，即索引值。
• 当传入一个DOM元素的时候，返回该DOM元素在其父级中的索引值

示例1

HTML代码：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li class="selected">列表项3</li>
  <li>列表项4</li>
  <li>列表项5</li>
</ul>

JavaScript代码：

$(document).ready(function(){
  var index = $("li.selected").index();
  console.log("selected元素的索引值为：" + index);
});

结果输出：

selected元素的索引值为：2

分析：上面的示例首先利用class选择器选取到<li>中的class="selected"的元素，然后使用index()方法获取该元素在同级节点中的索引值，结果为2。

示例2

HTML代码：

<div>
  <p>段落1</p>
  <p>段落2</p>
  <p class="selected">段落3</p>
  <p>段落4</p>
  <p>段落5</p>
</div>

JavaScript代码：

$(document).ready(function(){
  var index = $("p").index($("p.selected"));
  console.log("selected元素的索引值为：" + index);
});

结果输出：

selected元素的索引值为：2

分析：上面的示例首先选取所有的<p>元素，利用index()方法获取指定参数在所选元素中的索引值。在传入参数的时候，先选取class="selected"的元素p.selected，再通过参数传入，此时获取到该元素在所有<p>元素中的索引值，结果为2。

总结

index()方法可以很方便的获取元素在同级节点中的索引值，而且还可以传入参数，获取指定元素在已选节点中的索引值。使用场景比较多，对于开发者来说是一个非常方便的方法。