[英]How to get index element?
我如何从元素读取索引? 例:
我有代码:
<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 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
(取决于您是要计算其他类型的节点还是仅对Elements进行计数)的次数不为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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.