javascript:页面上出现两次相同的 div id

Question

我需要弄清楚是否可以对具有相同 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 上附加一些随机数，使每个盒子伪唯一......但这会不必要地进行两次计算......我想要它们两者同时更新相同的信息。

Answer 1

ID 必须在页面中是唯一的。是invalid具有非唯一元素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');