javascript - 列中的哪一个是这个元素

Question

假设我有以下代码：

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

单击时，我需要该函数func来获取：
1. div 的索引，其中调用了 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并测试 nodeType 为 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);
}​

例子