如何获取索引元素

How to get index element?

本文关键字：索引 元素 获取 何获取      更新时间：2023-09-26

如何从元素中读取索引？示例：

我有代码：

<div class="a">
<span id="el">Yeah!</span>
<span class="span">1</span>
<span class="span">2MANO</span>
</div>

和javascript：var mySpan = document.getElementsByTagName("span")[0]; // it span id="el"正常，

但是我如何从这个元素的跨度索引中读取

var span= document.getElementById("el"); // i should get index 0 but i cant do that

你说的是它在父节点中的位置：要做到这一点，请计算previousSibling或previousElementSibling(取决于你想计算其他类型的节点还是只计算元素(不是null:的次数

计数所有节点类型：

function getIndex(node) {
  var index = 0;
  while (node.previousSibling) {
    node = node.previousSibling;
    ++index;
  }
  return index;
}
console.log(getIndex(document.getElementById("el")));  // 0
console.log(getIndex(document.getElementById("el2"))); // 5, counts text nodes
<div class="a">
<span id="el">Yeah!</span>
<span class="span">1</span>
<span class="span" id="el2">2MANO</span>
</div>

仅计数元素：

function getElementIndex(node) {
  var index = 0;
  while (node.previousElementSibling) {
    node = node.previousElementSibling;
    ++index;
  }
  return index;
}
console.log(getElementIndex(document.getElementById("el")));  // 0
console.log(getElementIndex(document.getElementById("el2"))); // 2, counts only elements
<div class="a">
<span id="el">Yeah!</span>
<span class="span">1</span>
<span class="span" id="el2">2MANO</span>
</div>

如果您通过getElementById获取元素，您将无法获取。你需要参考父母，并通过父母子女获得其索引：

var nodes = Array.prototype.slice.call( document.getElementsByClassName('a')[0].children );
var span = document.getElementById('el');
var index = nodes.indexOf(span);
console.log(index); // 0
var span = document.getElementById('el2');
var index = nodes.indexOf(span);
console.log(index); // 1
<div class="a">
<span id="el">Yeah!</span>
<span id="el2">Yeah!</span>
</div>

您可以查看父节点及其子节点(使用ES6语法(：

const span = document.getElementById("el");
const idx = [...span.parentNode.children].findIndex(n => n === span);

以下是ES5中的替代方案：

idx = Array.prototype.slice.call(span.parentNode.children)
  .reduce(function(result, node, i) {
    return node === span ? i : result;
  }, -1);
相关文章：