如何实现点击class为word的子div时返回其在父容器中的索引

下面提供两种实现方式，可根据实际场景选择：

方法一：直接绑定点击事件到目标元素 #

这种方式适合元素固定的场景，直接定位到内容为“jkl”的子div，绑定点击事件后计算其索引：

<div class="alphabets">
  <div class="word"> abc </div>
  <div class="word"> def </div>
  <div class="word"> ghi </div>
  <div class="word"> jkl </div>
  <div class="word"> mno </div>
</div>

<script>
function fun(element) {
  // 将父元素的子节点集合转为数组
  const siblingElements = Array.from(element.parentElement.children);
  // 返回从1开始的索引（对应需求里的“第几个子元素”）
  return siblingElements.indexOf(element) + 1;
}

// 精准定位内容为jkl的.word元素
const targetDiv = Array.from(document.querySelectorAll('.alphabets .word')).find(el => el.textContent.trim() === 'jkl');

// 绑定点击事件
targetDiv.addEventListener('click', function() {
  const index = fun(this);
  console.log(index); // 点击后控制台输出4
});
</script>

方法二：事件委托（适配动态元素） #

如果子元素是动态生成的，推荐用事件委托，通过父元素监听点击事件，避免重复绑定：

<div class="alphabets">
  <div class="word"> abc </div>
  <div class="word"> def </div>
  <div class="word"> ghi </div>
  <div class="word"> jkl </div>
  <div class="word"> mno </div>
</div>

<script>
function fun(element) {
  const siblingElements = Array.from(element.parentElement.children);
  return siblingElements.indexOf(element) + 1;
}

// 给父元素绑定事件委托
document.querySelector('.alphabets').addEventListener('click', function(e) {
  const clickedEl = e.target;
  // 判断点击的元素是否为目标元素
  if (clickedEl.classList.contains('word') && clickedEl.textContent.trim() === 'jkl') {
    const index = fun(clickedEl);
    console.log(index); // 点击后控制台输出4
  }
});
</script>

关键说明 #

• Array.from()用于将DOM子节点集合转换为数组，这样才能使用数组的indexOf()方法获取元素位置
• textContent.trim()会去除内容前后的空格，避免因空格导致的匹配失败
• 索引加1是因为需求中“第几个子元素”是从1开始计数（对应示例里的第4个）

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