jQuery | index() 示例

简介

jQuery 的 index() 方法用于获取指定元素在同级元素中的位置索引值。该方法返回的是以 0 开始的索引值，表示传入元素在同级元素中的位置。

语法

$(selector).index()

参数

该方法不接受任何参数。

返回值

该方法返回一个整数，表示指定元素在同级元素中的位置索引值，以 0 开始计数。

示例

HTML 代码

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

jQuery 代码

$(document).ready(function(){
  $("li").click(function(){
    var index = $(this).index();
    alert("当前元素的索引值为：" + index);
  });
});

描述

以上代码定义了一个 click 事件监听，当用户点击列表元素时，弹出一个对话框，显示当前元素在同级元素中的位置索引值。

细节说明

• 如果传入的元素在同级元素中不存在，则返回值为 -1。
• 如果传入的元素在其父级元素中存在多个，则只返回第一个的位置索引值。如果要获取所有位置索引值，可以使用 .each() 方法遍历。
• 当需要获取多个元素的位置索引值时，可以使用 .map() 方法对多个元素进行处理和转换。

总结

index() 方法可以用于判断当前元素是否为列表中的第一个或最后一个元素，也可以用于对同级元素进行排序、筛选和过滤。在实际开发中，一定要熟练掌握该方法的使用，可以大大提高代码的效率和可读性。