哪一个列是该元素

Question

假设下面的代码我有：

<div id="container"> 
<div onclick="func(this)"></div> 
... 
... 
<div onclick="func(this)"></div> 
</div> 

在点击我需要的功能func获得：
1.股利，其中的onclick的指数事件被调用。
2.容器中div的总数。

Answer 1

假设您的func收到this作为第一个参数，您可以简单地遍历先前的兄弟姐妹，并计算出之前有多少人计算出索引。

为了获得总数，只需从父母处获得.children的计数。

function func(elem) { 
    var idx = 0; 
    var total = elem.parentNode.children.length; 
    // --------v----note the assignment! 
    while (elem = elem.previousElementSibling) { 
     idx++; 
    } 
    console.log("index:", idx, " of:", total); 
} 

如果您需要支持没有.previousElementSibling旧的浏览器，你可以使用.previousSibling和测试的节点类型是1

function func(elem) { 
    var idx = 0; 
    var total = elem.parentNode.children.length; 
    // --------v----note the assignment! 
    while (elem = elem.previousSibling) { 
     if (elem.nodeType === 1) 
      idx++; 
    } 
    console.log("index:", idx, " of:", total); 
} 

所有这些假设没有其他元素在应计数的容器中。如果有其他人，则需要将其过滤掉。

Answer 2

该代码会做你需要的东西：

function func(el){ 
    // get the list of all element contained by the parent 
    var list = el.parentElement.children, i; 
    // get the index of the element 
    for (i = 0; i<list.length;i++){ 
     if (list[i] == el) break; 
    } 
    // logging index and total childrencount to console (F12) 
    console.log("children total: "+list.length); 
    console.log("# of element: "+ ++i); 
}​ 

Example