Javascript 如何获取索引元素？

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

我有密码：

<div class="a">
<span id="el">Yeah!</span>
<span class="span">1</span>
<span class="span">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（索引）；//0
var span=document.getElementById（'el2'）；
var index=nodes.indexOf（span）；
console.log（索引）；//1

是 啊
是 啊

如果您是通过

getElementById

获取元素，则无法执行此操作。您需要引用父项并通过父项和子项获取其索引：

var nodes=Array.prototype.slice.call（document.getElementsByClassName（'a'）[0].children）；
var span=document.getElementById（'el'）；
var index=nodes.indexOf（span）；
console.log（索引）；//0
var span=document.getElementById（'el2'）；
var index=nodes.indexOf（span）；
console.log（索引）；//1

是 啊
是 啊

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

以下是ES5中的备选方案：

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

---

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

以下是ES5中的备选方案：

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

---

您已经说过，您的意思是它在其父节点中的位置：要做到这一点，请计算有多少次

previousSibling

或

previousElementSibling

（取决于您是要计算其他类型的节点还是仅计算元素）不是

null

：

计算所有节点类型：

函数getIndex（节点）{
var指数=0；
while（node.previousSibling）{
node=node.previousSibling；
++指数；
}
收益指数；
}
log（getIndex（document.getElementById（“el”））；//0
console.log（getIndex（document.getElementById（“el2”））；//5，统计文本节点数

是 啊
1.
2马诺

您说过，您的意思是它在其父节点中的位置：要做到这一点，请计算有多少次

previousSibling

或

previousElementSibling

（取决于您是要计算其他类型的节点还是仅计算元素）不是

null

：

计算所有节点类型：

函数getIndex（节点）{
var指数=0；
while（node.previousSibling）{
node=node.previousSibling；
++指数；
}
收益指数；
}
log（getIndex（document.getElementById（“el”））；//0
console.log（getIndex（document.getElementById（“el2”））；//5，统计文本节点数

是 啊
1.
2马诺

你所说的“索引”是什么意思？在其父级中的位置？相对于文档中所有其他

span

s的索引？完全是其他的吗？您可以执行如下操作，

var mySpans=[].slice.call（document.getElementsByTagName（“span”）；var index=mySpans.indexOf（document.getElementById（“el”））

index 0,1,2…在其父代中的位置“index”是什么意思？在其父级中的位置？相对于文档中所有其他

span

s的索引？完全是其他的吗？您可以执行如下操作，

var mySpans=[].slice.call（document.getElementsByTagName（“span”）；var index=mySpans.indexOf（document.getElementById（“el”））

index 0,1,2…在其父级中的位置完全可以不引用父级就完成此操作。有趣的是，也许您可以提供一个答案？我以为有几种方法可以解决这个问题，只是对它们都不确定。我看到了。稍微复杂一点，但我喜欢。好吧，如果你忽略

数组中隐藏的复杂性，只会更复杂。从
和
数组#indexOf
…-）（但是用抽象来管理复杂性是一件好事™, 所以：-）你完全可以不用参考父母就可以做到这一点。有趣的是，也许你可以提供一个答案？我以为有几种方法可以解决这个问题，只是对它们都不确定。我看到了。稍微复杂一点，但我喜欢。好吧，如果你忽略
数组中隐藏的复杂性，只会更复杂。从
和
数组#indexOf
…-）（但是用抽象来管理复杂性是一件好事™, 所以：-）
idx = Array.prototype.slice.call(span.parentNode.children)
  .reduce(function(result, node, i) {
    return node === span ? i : result;
  }, -1);