Самый быстрый способ найти элемент с таким же значением атрибута

Question

Я разбираю некоторые div с URL-адресом в качестве идентификатора, и в случае, если тот же url/ID существует, я хочу обойти его. Поэтому на каждом добавлении я просматриваю 100-е из divs, чтобы найти такое же значение атрибута, что и все те 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> 

Так что если StackOverflow существует, байпас:

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

Что бы самый быстрый способ сделать с чистым JS?

EDIT:

Таким образом, после давая попробовать его более сложный, что я подумал:

Поскольку я должен добавить первое содержимое, а затем найти, если данные-идентификатор с определенным атрибутом значения дважды существует , Я изо всех сил пытаюсь достичь самого быстрого пути.

Вот мой 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]) 
    } 
} 

Этот выход будет:

<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> 

из которых как 9gag.com и StackOverflow .com существует больше, чем t Вайс.

Как я могу оставить только 1 из них и удалить остальные? & Это самый быстрый способ достижения этого?

Answer 1

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

Answer 2

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/

Answer 3

Можно ли использовать ассоциативный массив?

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