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 / boxes的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');

Answer 2

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

如果你必须有重复的ID，即使我怀疑它，它仍然是可能的。你已经变得更难了，因为querySelectorAll不能使用以数字开头的ID属性（即使它们在HTML5 .. ACK中有效）。您无论如何都可以检查.my_box div上的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/

javascript：页面上两次相同的div id

2 个答案: