我有一些使用 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?
最佳答案
您可以在添加之前检查您要添加的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;
关于javascript - 检测与另一个元素具有相同属性值的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32661830/