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.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>
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 complicated 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.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>
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.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>
of which both 9gag.com and stackoverflow.com 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?
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]);
}
}
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
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.