更改 HTML innerText in element with duplicates

Question

我想專門更改此 HTML 中“數量”div 的 innerText：

<div class="shop" id="shop">
        <div id="1" class="item"> // Div nr. 1
          <div class="details">
            <div class="buttons">
              <div id="1" class="quantity"> // <-- Don't change this one!
            </div>
          </div>
        </div>
        <div id="2" class="item"> // Div nr. 2
          <div class="details">
            <div class="buttons">
              <div id="2" class="quantity"> // <-- Change this one!
            </div>
          </div>
        </div>
</div>

我嘗試使用document.querySelector('.quantity').innerText = "" 。 但這只會改變第一個出現的 div，其“數量”為 class，位於“Div nr.1”之內。

我如何專門針對“Div nr. 2”中的“數量”class？

Answer 1

鑒於您提供的 html，您可以 select 第二個.item然后下降到它的.details ，如下所示： document.querySelector('.item:nth-child(2).quantity').innerText="";

https://jsfiddle.net/6L8gntmh/

如果您可以訪問 html，那么讓 id 唯一是明智的。然后您就可以通過他們的 id 訪問 select。

Answer 2

您可以使用 querySelectorAll 這允許您修改 HTML 元素基於 class 和 id 而不是每個元素之一。

document.querySelectorAll('.quantity')[1].innerText = "我的文本"

Answer 3

根據您的具體情況，使用不同類型的選擇器可能更有用：

document.querySelector('#id2 .quantity').innerText = ""

所有 id 必須是唯一的並且可以以數字開頭，但是 select 很痛苦，我建議您的 id 以字母開頭。