3

ID として URL を使用していくつかの div を解析していますが、同じ URL/ID が存在する場合は、それをバイパスしたいと考えています。したがって、追加するたびに、何百もの 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 が 2 回存在するかどうかを確認する必要があるため、可能な限り最速の方法を達成するためにプロセスに苦労しています。

ここに私の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 の両方が 2 回以上存在します。

それぞれを 1 つだけ残して残りを削除するにはどうすればよいですか? ＆これはこれを達成するための最速の方法ですか？

4

3 に答える 3

8 
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-30T17:54:05.720 に答える
2 
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-30T18:47:37.680 に答える
0

連想配列は使えますか？

for ( ... ) {
    if ( defined foo[url] )
        next;
    foo[url] = 1;
    // Your logic here
}
于 2013-06-30T18:36:46.423 に答える