查找具有相同属性值的元素的最快方法

Question

我正在使用url作为ID解析一些div,如果存在相同的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>

因此,如果存在stackoverflow,请绕过:

$('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])
    }
}

这将输出:

<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都存在两次以上.

我如何只留下其中一个并删除其余部分？这是实现这一目标的最快方式吗？

Answer 1

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/