如何获得一个元素索引的一套固定的元素在Javascript

问题描述：

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

我知道我可以做：

集clickhandlers所有各自的指标要素，使正在单击时，他们已经知道从封闭范围
优点的指数：可能是最快的方式
缺点：多个事件handlers->更多对象 - >更多的内存
迭代通过所有的孩子，比较每个元素的一个点击，统计指标，直到你达到它
个优点：工作
缺点：你必须通过列表进行迭代并进行比较（慢）
（建议在SO）使用previousSibling属性返回空沿途计数每个孩子以确定你的索引
优点：作品，可能有点不是选项2更好，因为你从孩子直开始
缺点：通过元素仍然迭代
（解决方案我认为），因为有一组固定的，我们可以设置“的tabindex”属性每个元素（在HTML或经由JS）上，当点击该元素时，我们只是检查元件
tabindex属性属性优点：应该是一样快的选项1个
缺点：（之前我在不使用tabIndex因为它的目的我喊道：]），这使得可聚焦该元素，你可能会或可能不希望

因此，在性能（速度和内存）方面，上述哪一种方法最好，或者有更好的方法？

非常感谢，提前致谢。

你可以在http://jsperf.com/上自己测试这些东西。 – 2013-03-15 15:09:46

谢谢菲利克斯，我确实知道这一点，我只是想展示我已经考虑的选项，以鼓励思考一个不同的解决方案 – nightsRey 2013-03-15 16:22:14

答

选项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调用新的浏览器。

嗨Alnitak，绝对想在容器级使用一个事件处理程序，而不是一个每一个元素，这就是为什么我不是选项1的粉丝。但是你的解决方案看起来很棒，就像选项4一样，但没有任何缺点。再次感谢。 – nightsRey 2013-03-15 16:19:57

答

可以使用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

相关推荐