jquery 索引

jQuery 索引的基本概念

jQuery 索引通常指通过索引位置获取或操作 DOM 元素。jQuery 提供了多种方法来实现基于索引的操作，例如 eq()、:eq() 选择器或直接通过数组下标访问。

通过 eq() 方法获取元素

eq() 方法返回 jQuery 对象中指定索引位置的元素，索引从 0 开始。语法如下：

$(selector).eq(index);

示例：

// 获取第二个 <li> 元素
$("li").eq(1).css("color", "red");

使用 :eq() 选择器

:eq() 是 jQuery 的伪类选择器，直接筛选指定索引的元素。语法：

$(selector:eq(index));

示例：

// 选择第三个 <div> 元素
$("div:eq(2)").hide();

通过数组下标访问

jQuery 对象本质上是类数组对象，可以直接通过下标访问原生 DOM 元素：

$(selector)[index];

注意：这种方式返回的是原生 DOM 元素，而非 jQuery 对象，需转换为 jQuery 对象才能调用 jQuery 方法：

$($("li")[1]).addClass("active");

反向索引 :nth-last-child()

如需从末尾开始索引，可使用 :nth-last-child() 或计算正向索引：

// 选择倒数第二个 <p> 元素
$("p:nth-last-child(2)").css("font-weight", "bold");

索引相关方法扩展

• index()：获取元素在其同级元素中的位置。

  // 获取点击的 <li> 索引
  $("li").click(function() {
    console.log($(this).index());
  });

• slice()：选取一个索引范围内的元素。

  // 选取第 2 到第 4 个 <span>
  $("span").slice(1, 4).addClass("highlight");

注意事项

• 索引超出范围时，eq() 返回空 jQuery 对象，而数组下标返回 undefined。
• 使用 :eq() 选择器时，索引是相对于当前匹配集的，而非整个 DOM。

性能优化建议

对大型 DOM 操作时，缓存 jQuery 对象以减少重复查询：

var $items = $(".item");
$items.eq(3).fadeOut();

以上方法可根据实际需求选择，灵活实现基于索引的 DOM 操作。