0

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

我知道我能做什么：

  1. 在具有各自索引的所有元素上设置点击处理程序，以便在单击它们时他们已经从闭包范围中知道它们的索引
    优点：可能是最快的方法
    缺点：更多事件处理程序->更多对象->更多内存

  2. 遍历所有子元素，将每个元素与单击的元素进行比较并计算索引直到达到它
    优点：有效
    缺点：您必须遍历列表并进行比较（较慢）

  3. （在 SO 上提出）使用 previousSibling 属性返回到 null 计算沿途的每个孩子以确定您的索引
    优点：工作，可能比选项 2 好一点，因为您直接从孩子开始
    缺点：仍在遍历元素
  4. （我想到的解决方案）由于有一个固定的集合，我们可以在每个元素上设置“tabindex”属性（在html中或通过JS），当点击元素时，我们只需检查元素的tabindex属性
    优点：应该只是与选项 1 一样
    快

那么就性能（速度和内存）而言，以上哪一个是最好的方法，或者有更好的方法吗？

提前非常感谢，非常感谢。

4

2 回答 2

0

选项 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调用。

于 2013-03-15T15:11:41.597 回答
0

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

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

如果可以更改 DOM 节点，则设置属性 data-index 不是一个好的解决方案。

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;
}
于 2013-10-14T06:33:10.580 回答