Question

我在容器中有一组固定的元素（比如30）。现在，当点击一个元素时，我想在该容器中找出它的索引。

我知道我能做什么：

使用各自的索引在所有元素上设置clickhandlers，这样当它们被点击时，他们已经知道了闭包范围内的索引。优点：可能是最快的方式缺点：更多事件处理程序 - >更多对象 - >更多内存
遍历所有孩子，将每个元素与点击的元素进行比较并计算索引，直到达到它为止优点：工作
缺点：您必须遍历列表并进行比较（较慢）
（在SO上提议）使用previousSibling属性返回null对沿途的每个孩子进行计数以确定您的索引
优点：工作，可能比选项2好一点，因为你直接从孩子开始缺点：仍在迭代元素
（我想到的解决方案）由于有一个固定的集合，我们可以在每个元素上设置“tabindex”属性（在html中或通过JS），当单击该元素时，我们只需检查元素的tabindex属性。 /> 优点：应该与选项1一样快缺点:(在我因为没有按预期使用tabindex而大喊大叫之前：]）这使得元素可以集中，你可能想要也可能不想要

因此，就性能（速度和内存）而言，上述哪种方式是最佳方式，还是有更好的方法吗？

非常感谢，非常感谢。

Answer 1

选项5，优于上述所有选项 - 将索引存储为节点上的data-index属性，并在事件处理程序中检索该属性。

您可以在容器上注册事件处理程序，然后使用“事件冒泡”，而不是在每个节点上注册事件处理程序。由于未在子节点中处理click事件，它将通过DOM冒泡到节点的父节点，您可以使用event.target来查找最初接收事件的节点。

var container = ... // your container;

container.addEventListener('click', function(ev) {
    var target = ev.target;    // which child was actually clicked
    var index = target.getAttribute('data-index');
    ...
}, false);

在较新的浏览器上，您可以使用target.dataset.index代替getAttribute来电。

Answer 2

您可以将sourceIndex用于所有IE浏览器，并将previousElementSibling用于其他浏览器。

使用sourceIndex是最简单和最快的，但仅限IE。

如果可以更改DOM节点，则设置属性数据索引不是一个好的解决方案。

previousElementSibling和previousSibling不是很慢。

function getChildrenIndex(ele){
    //IE is simplest and fastest
    if(ele.sourceIndex){
        return ele.sourceIndex - ele.parentNode.sourceIndex - 1;
    }
    //other browsers
    var i=0;
    while(ele = ele.previousElementSibling){
        i++;
    }
    return i;
}

如何在Javascript中的固定元素集上获取元素索引

2 个答案: