获取元素在兄弟节点中的位置：实现点击返回对应序号的函数

要实现点击列表项时输出它在兄弟元素中的序号（从1开始计数），可以通过以下方式修改你的Funk函数：

简洁版实现（现代浏览器兼容） #

function Funk(x) {
  // 把父元素的子元素集合转为数组，找到当前元素的索引后加1
  const siblingPosition = Array.from(x.parentElement.children).indexOf(x) + 1;
  console.log(siblingPosition);
}

兼容旧浏览器的遍历版 #

如果需要支持不具备Array.from方法的旧浏览器，可以用循环遍历的方式实现：

function Funk(x) {
  let position = 0;
  const siblings = x.parentElement.children;
  
  for (let i = 0; i < siblings.length; i++) {
    if (siblings[i] === x) {
      position = i + 1;
      break;
    }
  }
  
  console.log(position);
}

完整可运行的代码示例 #

<ul> 
  <li onclick='Funk(this)'>1</li> 
  <li onclick='Funk(this)'>2</li> 
  <li onclick='Funk(this)'>3</li> 
  <li onclick='Funk(this)'>4</li> 
</ul>

<script>
function Funk(x) {
  const siblingPosition = Array.from(x.parentElement.children).indexOf(x) + 1;
  console.log(siblingPosition);
}
</script>

关键逻辑说明 #

• x.parentElement.children：获取当前元素父节点下的所有元素类型子节点，会自动忽略<ul>里的换行空白文本节点，避免无关节点干扰序号计算。
• 数组索引从0开始，所以找到索引后加1，就能得到从1开始的序号。

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