Question

我有一个6个大正方形的网格，每个正方形内部有9个较小的正方形。内部正方形＆＃39;类被命名为i1，i2，i3等。

所以我创建了一个循环来改变类元素的textContent：

for(var i = 0; i < 9; i++){
document.querySelector('.'+'i'+(i+1)).textContent = i+1;
}

HTML看起来像这样：

<div class="container">
<div class="row r1" style="background: red">
    <div class="square o1">
        <div class="isq i1"></div>
        <div class="isq i2"></div>
        <div class="isq i3"></div>
        <div class="isq i4"></div>
        <div class="isq i5"></div>
        <div class="isq i6"></div>
        <div class="isq i7"></div>
        <div class="isq i8"></div>
        <div class="isq i9"></div>
    </div>
    <div class="square o2">
        <div class="isq i1"></div>
        <div class="isq i2"></div>
        <div class="isq i3"></div>
        <div class="isq i4"></div>
        <div class="isq i5"></div>
        <div class="isq i6"></div>
        <div class="isq i7"></div>
        <div class="isq i8"></div>
        <div class="isq i9"></div>
    </div>
    <div class="square o3">
        <div class="isq i1"></div>
        <div class="isq i2"></div>
        <div class="isq i3"></div>
        <div class="isq i4"></div>
        <div class="isq i5"></div>
        <div class="isq i6"></div>
        <div class="isq i7"></div>
        <div class="isq i8"></div>
        <div class="isq i9"></div>
    </div>
</div>
</div>

然而，只有＆＃34; square o1＆＃34;班级收到了新的内容，其余的广场都没有，现在看起来像这样：

image here

我的问题是，如何为这些类的所有项目设置新内容。但更好的问题是我该如何控制它？在将来，我只想改变让我们说＆＃34; square o3＆＃34;的内容。儿童班，所以我不想改变所有这些。

编辑：

可能值得补充一点，我只能使用querySelector来添加textContent。它没有使用getElementsByClassName或querySelectorAll，说实话我不知道为什么。

Answer 1

document.querySelector()仅返回页面上的第一个元素。您将要使用document.getElementsByClassName();。这将返回包含该类的所有元素的数组。

所以你可以：

for(var i = 0; i < 9; i++){
    document.getElementsByClassName('i'+(i+1)).forEach(function(el) {
        el.textContent = i+1;
    }
}

Answer 2

您可能需要使用Document.querySelectorAll()。

此外，您还需要在大循环中创建另一个循环，以涵盖div，o1和o2类的o3。

for(var i = 0; i < 9; i++){
   var group = document.querySelectorAll('.'+'i'+(i+1));
   for (var j = 0; j < group.length; j ++) {
    group[j].textContent = i+1;
   }
   
}
// To get `<div class="square o3">`
alert(document.querySelector(".square.o3").innerHTML);

<div class="container">
<div class="row r1" style="background: red">
    <div class="square o1">
        <div class="isq i1"></div>
        <div class="isq i2"></div>
        <div class="isq i3"></div>
        <div class="isq i4"></div>
        <div class="isq i5"></div>
        <div class="isq i6"></div>
        <div class="isq i7"></div>
        <div class="isq i8"></div>
        <div class="isq i9"></div>
    </div>
    <div class="square o2">
        <div class="isq i1"></div>
        <div class="isq i2"></div>
        <div class="isq i3"></div>
        <div class="isq i4"></div>
        <div class="isq i5"></div>
        <div class="isq i6"></div>
        <div class="isq i7"></div>
        <div class="isq i8"></div>
        <div class="isq i9"></div>
    </div>
    <div class="square o3">
        <div class="isq i1"></div>
        <div class="isq i2"></div>
        <div class="isq i3"></div>
        <div class="isq i4"></div>
        <div class="isq i5"></div>
        <div class="isq i6"></div>
        <div class="isq i7"></div>
        <div class="isq i8"></div>
        <div class="isq i9"></div>
    </div>
</div>
</div>

Answer 3

你应该使用另一个for循环，所以它最终会像：

for(var o = 0; o < 3; o++){
  for(var i = 0; i < 9; i++){
    document.querySelector('.o'+(o+1)+' .i'+(i+1)).textContent = i+1;
  }
}

而且，如果你只想为某个群体（比方说o3）做，那就试试吧：

for(var i = 0; i < 9; i++){
  document.querySelector('.o3 .i'+(i+1)).textContent = i+1;
}

Answer 4

document.querySelector返回单个元素（第一个找到的节点）。

如果你想循环匹配patternm的3个元素，你可以使用querySelectorAll来返回一个数组，然后循环.square元素，然后循环iNUMBER子元素。

使用循环向多个类添加内容，但每个类中只有1个元素接收内容

4 个答案: