Question

我想找到<li>容器中点击元素的编号。（例如，点击的元素是第3个孩子。）

到目前为止，我有这段代码：

window.onload = function ()
{
    var dropDown = document.getElementsByTagName("nav")[0].getElementsByTagName("ul")[0].getElementsByTagName("li")[3];
    dropDown.addEventListener('click', hide, false);
    function hide(e) {
        // Find out the number of the n-th child element you clicked instead of hiding it
        e.target.style.visibility = 'hidden';
    }
}

有没有办法找出我点击了哪个孩子？

Answer 1

我可能会误解，但这不是indexOf()的作用吗？

var els = el.parentNode.children; // or .childNodes if you want TextNodes
return [].indexOf.call(els, el);

所以在事件处理程序中：

function(e) {
  var el = e.target;
  var els = el.parentNode.children; // or .childNodes if you want TextNodes
  return [].indexOf.call(els, el);
}

由于parentNode.children / parentNode.childNodes没有返回Array，而是NodeList（或类似），indexOf()方法不是＆＃39 ;可用。两个修复：

首先从Array创建NodeList，然后致电indexOf：arr = [].slice.call(children)，这意味着：Array.prototype.slice.call(children, 0)调用Array＆＃39 ; slice()方法具有不同的this上下文（如果您不知道这意味着什么，请在通话时阅读/ apply / this）。然后：arr.indexOf(el)
或者立即在NodeList上使用相同的技巧。如果slice有效，indexOf也应该有效：Array.prototype.indexOf.call(children, el)或更短：[].indexOf.call(children /*this*/, el /*arg1*/)
我的收藏：HTMLCollection.prototype.indexOf = NodeList.prototype.indexOf = Array.prototype.indexOf et voila，现在您可以直接在indexOf上致电children。这是非常不赞成的：扩展本机对象显然是 A Bad Thing（TM）。

如果你不知道this在JS中的运作方式（如魔法！）以及Function.prototype.call()如何运作，那么这一切都是神奇的。

Answer 2

是。像这样：

function whereami(elem) {
    var par = elem.parentNode, sibs = par.children, l = sibs.length, i;
    for( i=0; i<l; i++) {
        if( sibs[i] === elem) return i;
    }
    throw "I am invisible!";
}

Answer 3

尽可能少的迭代，但这似乎是不使用像jQuery这样的库的唯一方法。

function count_element(elem) {
    var x = elem.previousSibling;
    var n = 0;

    while (x.nodeType!=1) {
      x = x.previousSibling;
      n++;
    }

    return n;
}

找出我刚刚点击的子元素

3 个答案: