0

我需要弄清楚是否可以对具有相同 ID 的两个相同元素执行相同的 javascript 操作。

我有一个在页面上出现两次的框，内容相同：

<div class="my_box" id="23"> Some bit 23 </div>

<div class="my_box" id="23"> Some bit 23 </div>

然后我找到那个元素：（或那些？）

var my_box_find = document.getElementsByClassName('my_box');

并且经过一些处理/计算后想要替换 /both/ 框的 innerHTML：

document.getElementById(my_box_find[i].id).innerHTML = 'New bit 23';

这是一个极其简化的例子。但是当我尝试更改的元素只出现一次时，它会起作用。如果它出现两次，只有第一个实例会被改变......

大声思考：我想我可以在 ID 上附加一些随机数，以使每个框都具有伪唯一性……但这会不必要地进行两次计算……我希望它们同时更新信息。

4

2 回答 2

4

ID在页面中必须是唯一的。具有非唯一元素是无效id的。

如果要对多个元素进行操作，请为每个元素分配一个类并循环选择结果。一个类可以被多次使用，一个元素可以被分配多个类。

var els = document.getElementsByClassName('my_box');
for (var i = 0; i < els.length; i++) els[i].innerHTML = 'New bit 23';

或者，使用 jQuery：

$('.my_box').html('New bit 23');
于 2013-02-16T18:52:31.107 回答
0

真正的答案是您应该使您的所有 ID 都是唯一的。请改用该data-id属性（不必是唯一的）。你甚至可以用同样的方式处理它。

如果您必须有重复的 ID，即使我对此表示怀疑，但仍有可能。你让它变得更加困难，因为它querySelectorAll不适用于以数字开头的 ID 属性（即使它们在 HTML5 .. ACK 中有效）。无论如何，您都可以检查.my_boxdiv 上的 ID 属性。

Array.prototype.forEach.call(document.querySelectorAll('.my_box'),
function (elem) {
    if (elem.id === '23') {
       elem.innerHTML = elem.innerHTML.replace('23', '24');
    }
});

http://jsfiddle.net/ExplosionPIlls/39nk2/

于 2013-02-16T19:00:14.780 回答