javascript - 检测与另一个元素具有相同属性值的元素

Question

我有一些使用 XMLHttpRequest 从 XML 文件加载的内容:

<div uid="29710" >
content....
</div>
<div uid="19291" >
content....
</div>
<div uid="099181" >
content....
</div>

获取内容的代码:

xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","notes.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML; 

var x = xmlDoc.getElementsByTagName("noteboard");
var newHTML = "";
for (i=0;i<x.length;i++) { 
   newHTML += "<div><div uid='"+ x[i].getAttribute('uid')+"'>"
            + x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue
            + "<br>"+ x[i].getElementsByTagName("message")[0].childNodes[0].nodeValue
           +"</div></div>";
}
document.querySelector('#panel').innerHTML += newHTML;

内容每 3 秒更新一次，但当旧内容和新内容重复堆积时，问题就开始了。此外，UID 属性值是从与内容相同的 XML 文件中加载的 - 因此所有新的重复内容都与旧的重复内容具有相同的 UID。

如果我不够清楚，这就是正在发生的事情:

<div uid="19291">Old Content</div>
<div uid="77191">New Content</div>
<div uid="19291">Old Content</div>
<div uid="19291">Old Content</div>
<div uid="21503">New Content</div>

那么如何删除所有具有相同 UID 值的 div，除了原始的 div？

Answer 1

您可以在添加之前检查您要添加的uid是否已经存在于页面中。

xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","notes.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML; 

var x = xmlDoc.getElementsByTagName("noteboard");
var newHTML = "";
for (i=0;i<x.length;i++) { 

  // check if the UID exists in the page and only add it if it does not
  var uid = x[i].getAttribute('uid');
  if ( !document.querySelector('#panel *[uid="'+ uid +'"]') ){

    newHTML += "<div><div uid='"+ x[i].getAttribute('uid')+"'>"
            + x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue
            + "<br>"+ x[i].getElementsByTagName("message")[0].childNodes[0].nodeValue
            + "</div></div>";
  }
}

document.querySelector('#panel').innerHTML += newHTML;