是否有可能在其父节点中获取元素的数字索引而不进行循环？

Question

通常我这样做:

for(i=0;i<elem.parentNode.length;i++) {
  if (elem.parentNode[i] == elem) //.... etc.. etc...
}

Answer 1

function getChildNumber(node) {
  return Array.prototype.indexOf.call(node.parentNode.childNodes, node);
}

这似乎适用于Opera 11,Firefox 4,Chromium 10.其他浏览器未经测试.如果节点没有父节点,它将抛出TypeError(node.parentNode !== undefined如果您关心该情况,请添加一个检查).

当然,Array.prototype.indexOf仍然在函数调用内循环.没有循环就不可能做到这一点.

好又短但请注意它不适用于IE <9.通常不鼓励在[主机对象]上应用`Array.prototype`方法(http://www.jibbering.com/faq/#hostObject),因为[规范](http://ecma262-5.com/ELS5_HTML.htm#Section_15.4.4.14)不能保证它们能正常工作:"indexOf函数是否可以成功应用于宿主对象是依赖于实现的". (5认同)
`indexOf`会扫描整个数组,所以从技术上来说它并没有真正回答这个问题.但由于indexOf是一个内置函数,它运行速度比编写自己的循环要快. (2认同)
应该是`.children`而不是`.childNodes`. (2认同)

Answer 2

你可以算兄弟姐妹...... childNodes列表包括文本和元素节点 -

function whichChild(elem){
    var  i= 0;
    while((elem=elem.previousSibling)!=null) ++i;
    return i;
}

Answer 3

您可以使用该Array.from()方法将HTMLCollection元素转换为数组.从那里,您可以使用本机.indexOf()方法来获取索引:

function getElementIndex (element) {
  return Array.from(element.parentNode.children).indexOf(element);
}

如果您希望节点指数(如反对元素的索引),然后更换children属性与childNodes属性:

function getNodeIndex (element) {
  return Array.from(element.parentNode.childNodes).indexOf(element);
}

您可以使用该.call()方法来调用数组类型的本机.indexOf()方法.如果您查看源代码,这就是在jQuery中实现该.index()方法的方法.

function getElementIndex(element) {
  return [].indexOf.call(element.parentNode.children, element);
}

同样,使用该childNodes属性代替该children属性:

function getNodeIndex (element) {
  return [].indexOf.call(element.parentNode.childNodes, element);
}

您还可以使用spread运算符:

function getElementIndex (element) {
  return [...element.parentNode.children].indexOf(element);
}

function getNodeIndex (element) {
  return [...element.parentNode.childNodes].indexOf(element);
}