I am parsing some divs with a url as an ID, and in case the same url/ID exists, I want to bypass it. So on every append, I'm searching through 100's of divs to find the same value of an attribute that all those div's have.

Example:

HTML:

<div data-id=""></div>
<div data-id=""></div>
<div data-id=""></div>
<div data-id=""></div>
<div data-id=""></div>
<div data-id=""></div>
<div data-id=""></div>
<div data-id=""></div>

So if stackoverflow exists, bypass:

$('div[data-id=""]').length

What would be the fastest way to do with pure js?

EDIT:

So after giving a try its more plicated that I thought:

Since I have to append first the content and then find if a data-id with certain value attribute exists twice, I'm struggling through the process to achive the fastest way possible.

Here's my HTML:

<div class="ele" data-id="">;/div>
<div class="ele" data-id="">;/div>
<div class="ele" data-id="">;/div>
<div class="ele" data-id="">;/div>
<div class="ele" data-id="">;/div>
<div class="ele" data-id="">;/div>
<div class="ele" data-id="">;/div>
<div class="ele" data-id="">;/div>
<div class="ele" data-id="">;/div>
<div class="ele" data-id="">;/div>
<div class="ele" data-id="">;/div>
<div class="ele" data-id="">;/div>
<div class="ele" data-id="">;/div>
<div class="ele" data-id="">;/div>
<div class="ele" data-id="">;/div>

and here's my 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])
    }
}

This will output:

<div class="ele" data-id="">;/div>
<div class="ele" data-id="">;/div>
<div class="ele" data-id="">;/div>
<div class="ele" data-id="">;/div>
<div class="ele" data-id="">;/div>

of which both 9gag and stackoverflow exists more than twice.

How do I leave only 1 of each and remove the rest? & is this the fastest way possible of achieving this?

I am parsing some divs with a url as an ID, and in case the same url/ID exists, I want to bypass it. So on every append, I'm searching through 100's of divs to find the same value of an attribute that all those div's have.

Example:

HTML:

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

So if stackoverflow exists, bypass:

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

What would be the fastest way to do with pure js?

EDIT:

So after giving a try its more plicated that I thought:

Since I have to append first the content and then find if a data-id with certain value attribute exists twice, I'm struggling through the process to achive the fastest way possible.

Here's my HTML:

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

and here's my 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])
    }
}

This will output:

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

of which both 9gag. and stackoverflow. exists more than twice.

How do I leave only 1 of each and remove the rest? & is this the fastest way possible of achieving this?

• javascript
• jquery
• performance
• attributes
• append

• The way to answer your question is to test the performance for yourself. StackOverflow really can't accurately answer this question for you. You need to take the actual page(s) where you're performing the operation, and do some performance tests in the browsers that you care about. There's no guarantee that a single test will accurately represent all situations. – user2437417 Commented Jun 30, 2013 at 18:32
• Is the final order important? – Jonathan Hall Commented Jun 30, 2013 at 18:41
• @Flimzy absolutely I'm afraid so – jQuerybeast Commented Jun 30, 2013 at 18:41
• Wait... are you just trying to remove duplicates? If so, just do the DOM selection once, loop the elements, and put the data-id value in an object key. At every element check to see if the key already exists in the object, and if so, remove the element. That way you're doing only one DOM selection. – user2437417 Commented Jun 30, 2013 at 18:43
• @CrazyTrain I absolutely agree I'm not looking for a performance test but rather an answer on something I'm can't figure out. If you read through my latest edit, I'm trying to find out how I could remove the multiple data attributes with same value but one. – jQuerybeast Commented Jun 30, 2013 at 18:43

3 Answers 3

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

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

Can you use an associative array?

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