更改 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 以字母开头。