我的頁面多個元素具有相同的類，如下所示
<div>
<ol class="sample-class">
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ol>
<div id="help">condent 1</div>
</div>
....
</div>
<ol class="sample-class">
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ol>
<div id="help">condent 2</div>
</div
我需要根據sample-class I js更改幫助內容以選擇元素，但它不起作用。
let listVal = document.getElementsByClassName('sample-class');
for(let el of listVal) {
el.offsetParent.getElementById('help').innerHTML = "my dynamic condent"
}
任何人都可以幫助我。謝謝
uj5u.com熱心網友回復：
您不能使用 getElementById 在另一個元素中查找內容，因此您需要改用 getElementByClassName。此外，如其中一條評論所述，ID 應該是唯一的。沒有 2 個元素可以具有相同的 ID。
請檢查下面的代碼片段，它會按預期作業。
let listVal = document.getElementsByClassName('sample-class');
for(let el of listVal) {
el.getElementsByClassName('help')[0].innerHTML = "my dynamic condent"
}<div>
<div class="sample-class">
<ol>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ol>
<div class="help">condent 1</div>
</div>
<div class="sample-class">
<ol>
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ol>
<div class="help">condent 2</div>
</div>
</div>uj5u.com熱心網友回復：
您通過回圈遍歷陣列而不修改正在回圈遍歷的陣列來過度復雜化您的代碼。我還想宣告，在訪問時，getElementById您總是會獲得包含此 ID 的第一個 DOM 元素。要解決此問題，請將 id 更改為類并遍歷這些類而不是兄弟類
const elements = document.querySelectorAll(".help");
for (const element of elements) {
element.innerText = "new text"
}
如果由于某種原因您需要遍歷 ol 元素：
const elements = document.querySelectorAll("ol");
for (const element of elements) {
element.nextSibling.innerText = "new text"
}
uj5u.com熱心網友回復：
ID 在頁面上應該是唯一的，并使用 nextSibling 函式。
<div>
<ol class="sample-class">
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ol>
<div class="help">condent 1</div>
</div>
....
</div>
<ol class="sample-class">
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ol>
<div class="help">condent 2</div>
</div>
<script>
let listVal = document.getElementsByClassName('sample-class');
for(let el of listVal) {
el.nextSibling.innerHTML = "my dynamic condent"
}
</scritp>
注意：如果在兩個 ol 元素之間添加空格，結果將是“未定義”。謝謝
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/329254.html
標籤：javascript html