如何獲得一個元素索引的一套固定的元素在Javascript

我有一個容器，一組固定的元素（比如30）。現在，被點擊的元素，當我想在該容器中找出它的索引。如何獲得一個元素索引的一套固定的元素在Javascript

我知道我可以做：

集clickhandlers所有各自的指標要素，使正在單擊時，他們已經知道從封閉範圍
優點的指數：可能是最快的方式
缺點：多個事件handlers->更多對象 - >更多的內存
迭代通過所有的孩子，比較每個元素的一個點擊，統計指標，直到你達到它
個優點：工作
缺點：你必須通過列表進行迭代並進行比較（慢）
（建議在SO）使用previousSibling屬性返回空沿途計數每個孩子以確定你的索引
優點：作品，可能有點不是選項2更好，因爲你從孩子直開始
缺點：通過元素仍然迭代
（解決方案我認爲），因爲有一組固定的，我們可以設置「的tabindex」屬性每個元素（在HTML或經由JS）上，當點擊該元素時，我們只是檢查元件
tabindex屬性屬性優點：應該是一樣快的選項1個
缺點：（之前我在不使用tabIndex因爲它的目的我喊道：]），這使得可聚焦該元素，你可能會或可能不希望

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

非常感謝，提前致謝。

來源

2013-03-15 nightsRey

你可以在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調用新的瀏覽器。

來源

2013-03-15 15:11:41 Alnitak

嗨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; 
}

來源

2013-10-14 06:33:10 cuixiping

如何獲得一個元素索引的一套固定的元素在Javascript

回答

相關問題