Question

我在页面的不同位置有两个<span> -tags，ID相同。我知道两次使用相同的ID是错误的。将ID更改为类是没有问题的。

HTML：

<span id="tumme">4</span>

...

<span id="tumme">4</span>

....

由

更新

AJAX：
document.getElementById(tumme).innerHTML = xmlHttp.responseText;

但仅在<span>上更新。

有什么想法吗？

Answer 1

从W3C网站上了解id（http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.2）：

此属性为元素指定名称。该名称在文档中必须是唯一的。

换句话说，给第二个span另一个id来修复它。

Answer 2

将id =更改为class =，因为具有相同id的2个元素为WRONG

然后使用jQuery及其强大的选择器，或者这里是function some guy wrote来按类名获取所有元素

Answer 3

由于每个文档的id必须是唯一的，因此您不能拥有两个具有相同ID的元素。找到一些其他方法来识别元素。类是将元素标记为组成员的标准方法。您还可以为它们提供不同的ID，然后将这些ID存储在数组中。

<span class="tumme"> 4 </span>

然后，当您从XHR请求中获取数据时，找到所有元素并循环它们。虽然您可以使用自己的方法来按类名获取元素，但使用an existing one更容易。

对它们进行循环只是一个例子：

for (var i = 0; i < elements.length; i++) {
    elements[i].innerHTML = xmlHttp.responseText;
}

Answer 4

使用getElementsByClass：

function getElementsByClass(searchClass,node,tag) { var classElements = new Array(); if ( node == null ) node = document; if ( tag == null ) tag = '*'; var els = node.getElementsByTagName(tag); var elsLen = els.length; var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"); for (i = 0, j = 0; i < elsLen; i++) { if ( pattern.test(els[i].className) ) { classElements[j] = els[i]; j++; } } return classElements; }

Answer 5

好吧，你可以使用NAME属性。让多个节点具有相同的名称是完全有效的。

所以你会有这些节点：

<span id="somethingUnique1" name="tumme"></span>
<span id="somethingUnique2" name="tumme"></span>

要更新它们，您可以执行以下操作：

var nodes = document.getElementsByName("tumme");
for (var i = 0, node; node = nodes[i]; i++) {
  node.innerHTML = xmlHttp.responseText;
}

使用一个ajax响应在html中更新两个相同的值

5 个答案: