jQuery获取.content容器中指定类子元素的选中索引

嘿，刚好能解决你的问题！不用写each循环，用jQuery的内置方法就能轻松拿到点击元素在指定子元素集合里的索引，下面给你两种符合你需求的实现方式：

方法一：最简洁的.index()直接调用 #

这是最高效的写法，直接利用jQuery的.index()方法的特性——当你给它传入一个jQuery对象时，它会返回该对象在当前集合中的位置（从0开始计数）：

// 给目标子元素绑定点击事件
$(".content").on("click", ".r-s, .r-f", function() {
  // 第一步：获取.content下所有需要关注的子元素集合
  const $targetElements = $(this).closest(".content").children(".r-s, .r-f");
  
  // 第二步：直接获取当前点击元素在集合中的索引（0开始）
  const zeroBasedIndex = $targetElements.index($(this));
  // 如果需要1开始的索引，直接加1即可
  const oneBasedIndex = zeroBasedIndex + 1;

  console.log("当前元素在目标集合中的索引（0开始）：", zeroBasedIndex);
  console.log("当前元素在目标集合中的索引（1开始）：", oneBasedIndex);
});

方法二：用.filter()配合.index()实现 #

如果你更倾向于用.filter()来筛选（符合你提到的思路），可以这样写：

$(".content").on("click", ".r-s, .r-f", function() {
  const $targetElements = $(this).closest(".content").children(".r-s, .r-f");
  
  // 用filter筛选出当前点击的元素，再获取它在原集合中的索引
  const zeroBasedIndex = $targetElements.filter((idx, elem) => {
    return $(elem).is($(this));
  }).index();

  console.log("索引值：", zeroBasedIndex);
});

为什么这两种方法都不用each？ #

jQuery的.index()和.filter()内部已经帮我们完成了遍历匹配的逻辑，比手动写each循环更简洁，也更符合jQuery的链式调用风格。而且你之前获取的length值，也可以用$targetElements.length直接拿到，完全连贯。

内容的提问来源于stack exchange，提问作者Case