javascript：相同的div id頁面上的兩次

我需要弄清楚我是否可以對具有相同ID的兩個相同元素執行相同的javascript操作。javascript：相同的div id頁面上的兩次

我有一個頁面上出現兩次相同內容的盒子：

<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與一些隨機數，使每個盒子僞唯一...但這樣會不必要地進行兩次計算......我希望它們都在同一時間用相同的信息進行更新。

來源

2013-02-16 Alltheprettyhorses

ID是通常只在頁面上使用一次。如果你有多個使它成爲一個班級。 ie-class =「my_box 23」。現在div將有兩個類，只是空間劃分它們。 – cwhelms 2013-02-16 18:52:29

一個ID應該是這樣的：一個唯一的標識符。你不應該有兩個具有相同ID的元素一個頁面。 – dfreeman 2013-02-16 18:52:46

ID 必須在頁面中是唯一的。它是invalid有非唯一元素id s。

如果您想對多個元素進行操作，請爲每個元素分配一個類並遍歷所選結果。一個類可以被多次使用，並且一個元素可以被分配多個類。

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-16 18:52:31 josh3736

的真正的答案是，你應該讓所有的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/

來源

2013-02-16 19:00:14

當談到解析HTML時，這個建議實際上是瀏覽器的寬恕濫用。該規範說'ID'屬性*必須*在頁面內是唯一的;無法編寫一個重複ID的有效文檔。 – josh3736 2013-02-16 19:04:25

@ josh3736你只是選擇忽略我的第一段？ – 2013-02-16 19:08:15

我正在談論第二個。因爲規範說ID *必須*（不*應該*）是唯一的，循環遍歷元素和比較'id'屬性並不總能保證工作。如果元素檢測到重複，則可能會重置元素的「id」屬性。 – josh3736 2013-02-16 19:10:06

javascript：相同的div id頁面上的兩次

回答

相關問題