找到具有相同屬性值的元素的最快方法

我正在使用url解析一些div作爲ID，並且在存在相同的url/ID的情況下，我想繞過它。所以在每一個追加中，我都在搜索100個div來找到所有div的屬性的相同值。找到具有相同屬性值的元素的最快方法

例子：

HTML：

<div data-id="http://stackoverflow.com"></div> 
<div data-id="http://engadget.com"></div> 
<div data-id="http://9gag.com"></div> 
<div data-id="http://reddit.com"></div> 
<div data-id="http://facebook.com"></div> 
<div data-id="http://stackoverflow.com"></div> 
<div data-id="http://twitter.com"></div> 
<div data-id="http://mashable.com"></div>

所以，如果計算器存在，旁路：

$('div[data-id="http://www.stackoverflow"]').length

什麼是做純JS最快的方法？

編輯：

所以給人一種嘗試它比較複雜，我認爲後：

因爲我必須先添加的內容，然後發現，如果一個數據ID具有一定的價值屬性存在兩次，我正在努力通過這個過程來實現儘可能最快的方式。

這裏是我的HTML：

<div class="ele" data-id="http://stackoverflow.com">http://stackoverflow.com</div> 
<div class="ele" data-id="http://engadget.com">http://engadget.com</div> 
<div class="ele" data-id="http://9gag.com">http://9gag.com</div> 
<div class="ele" data-id="http://reddit.com">http://reddit.com</div> 
<div class="ele" data-id="http://facebook.com">http://facebook.com</div> 
<div class="ele" data-id="http://stackoverflow.com">http://stackoverflow.com</div> 
<div class="ele" data-id="http://twitter.com">http://twitter.com</div> 
<div class="ele" data-id="http://mashable.com">http://mashable.com</div> 
<div class="ele" data-id="http://bbc.com">http://bbc.com</div> 
<div class="ele" data-id="http://twitter.ca">http://twitter.ca</div> 
<div class="ele" data-id="http://google.com">http://google.com</div> 
<div class="ele" data-id="http://apple.com">http://apple.com</div> 
<div class="ele" data-id="http://cnn.com">http://cnn.com</div> 
<div class="ele" data-id="http://imgur.com">http://imgur.com</div> 
<div class="ele" data-id="http://9gag.com">http://9gag.com</div>

，這裏是我的JS：

var a = document.getElementsByClassName("ele") 
for (i=0;i<a.length;i++) { 
    var b = a[i].getAttribute("data-id"); 
    if (document.querySelectorAll('div[data-id="' + b +'"]').length > 1){ 
     console.log(a[i]) 
    } 
}

這將輸出：其既9gag.com和計算器

<div class="ele" data-id="http://stackoverflow.com">http://stackoverflow.com</div> 
<div class="ele" data-id="http://9gag.com">http://9gag.com</div> 
<div class="ele" data-id="http://stackoverflow.com">http://stackoverflow.com</div> 
<div class="ele" data-id="http://stackoverflow.com">http://stackoverflow.com</div> 
<div class="ele" data-id="http://9gag.com">http://9gag.com</div>

的.com存在超過t WICE。

我該如何只留下其中的一個，並刪除其餘的？ &這是實現此目的的最快方式嗎？

來源

2013-06-30 jQuerybeast

回答你的問題的方法是測試表現自己。 StackOverflow真的不能爲你準確回答這個問題。你需要把你正在執行操作的實際頁面，並在你關心的瀏覽器中做一些性能測試。不能保證一次測試就能準確地代表所有情況。 –

最終訂單是否重要？ – Flimzy

@Flimzy絕對恐怕如此 – jQuerybeast

var store = {}; 

var a = document.getElementsByClassName("ele"); 

for (var i = 0, len = a.length; i < len; i++) { 
    var id = a[i].getAttribute("data-id"); 
    if (store.hasOwnProperty(id)) { 
     a[i].parentNode.removeChild(a[i]); 
     i--; 
     len--; 
    } else 
     store[id] = 1; 
}

來源

2013-06-30 18:47:37

雖然這有效，但我得到了「Uncaught TypeError：無法在循環中調用未定義」錯誤的方法'getAttribute'。 – jQuerybeast

@jQuerybeast：糟糕，我遇到了「實況列表」問題。我會更新以反向迭代。 –

謝謝。我還提到最後一個元素仍然活着。所以，而不是第一個元素stackoverflow，它被刪除，最後一個是活着的。這有道理嗎？ – jQuerybeast

document.querySelectorAll('div[data-id="http://www.stackoverflow"]').length;

var a = document.getElementsByClassName("ele") 
for (i=0;i<a.length;i++) { 
    var b = a[i].getAttribute("data-id"); 
    var all = document.querySelectorAll('div[data-id="' + b +'"]'); 
    for (var j = 1; j < all.length; j++){//if there is more than 1 match remove the rest 
     all[j].parentNode.removeChild(all[j]); 
    } 
}

http://jsfiddle.net/ehMML/

來源

2013-06-30 17:54:05 Musa

這可能是最快的方法，或者是否有其他方法可以使用？也許我不應該循環100個屬性值？ – jQuerybeast

爲什麼這會降低投票率？ –

是什麼？爲什麼要投票？ – 2013-06-30 17:56:02

您可以使用關聯數組？

for (...) { 
    if (defined foo[url]) 
     next; 
    foo[url] = 1; 
    // Your logic here 
}

來源

2013-06-30 18:36:46 Flimzy

你能檢查一下我的編輯嗎？ – jQuerybeast

我很確定我的答案仍然適用於您的編輯。 – Flimzy

找到具有相同屬性值的元素的最快方法

回答

相關問題