Question

我们假设我有以下代码：

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

点击后我需要功能func来获取：
1. div的索引，其中调用了onclick-event 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);
}

<强> Example

列中的哪一个是此元素

2 个答案: