Javascript 通过循环向多个类添加内容，但每个类中只有一个元素接收内容

我有一个由6个大正方形组成的网格，每个正方形内有9个小正方形。 内部正方形的类被命名为i1、i2、i3等等

因此，我创建了一个循环来更改类元素的textContent：

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

for（变量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>

然而，只有“square o1”类的元素收到了新内容，其余的方块没有收到，现在看起来是这样的：

我的问题是，如何为这些类的所有项设置新内容。但更好的问题是我如何控制它？将来我只想修改“square o3”儿童课程的内容，所以我不想全部修改

编辑：

---

可能值得补充的是，我只能通过使用querySelector来实现添加文本内容。它不适用于getElementsByClassName或querySelectorAll，老实说，我不知道为什么。

文档。querySelector（）

只返回页面上的第一个元素。您将要使用

document.getElementsByCassName（）。这将返回具有该类的所有元素的数组

所以你可以：

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

for（变量i=0；i<9；i++）{
document.getElementsByClassName（'i'+（i+1））.forEach（函数（el）{
el.textContent=i+1；
}
}
document.querySelector（）
仅返回页面上的第一个元素。您将要使用
document.getElementsByClassName（）；
。这将返回具有该类的所有元素的数组

所以你可以：

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

for（变量i=0；i<9；i++）{
document.getElementsByClassName（'i'+（i+1））.forEach（函数（el）{
el.textContent=i+1；
}
}
您可能需要使用

您还需要在大循环中创建另一个循环，以使用类
o1
、
o2
和
o3
覆盖
div
s


for（变量i=0；i<9；i++）{
var group=document.querySelectorAll（'.+'i'+（i+1））；
对于（var j=0；j


您可能需要使用

您还需要在大循环中创建另一个循环，以使用类
o1
、
o2
和
o3
覆盖
div
s


for（变量i=0；i<9；i++）{
var group=document.querySelectorAll（'.+'i'+（i+1））；
对于（var j=0；j

您应该为

循环使用另一个

，因此它最终类似于：

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;
  }
}

for（var o=0；o<3；o++）{
对于（变量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;
}

for（变量i=0；i<9；i++）{
document.querySelector（'.o3.i'+（i+1））.textContent=i+1；
}
您应该为

循环使用另一个

，因此它最终类似于：

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;
  }
}

for（var o=0；o<3；o++）{
对于（变量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;
}

for（变量i=0；i<9；i++）{
document.querySelector（'.o3.i'+（i+1））.textContent=i+1；
}
文档。querySelector

返回单个元素（找到的第一个节点）

---

如果要循环匹配模式M的3个元素，可以使用

querySelectorAll

返回数组，然后循环

.square

元素和

iNUMBER

子元素。

文档。querySelector

返回单个元素（找到的第一个节点）

---

如果要循环匹配模式m的3个元素，可以使用

querySelectorAll

返回数组，然后循环

.square

元素和

iNUMBER

子元素。

您尝试过

document.queryselectoral（）

？根本不起作用：）但是，如果我只想选择特定父类的类（我认为），它并不能解决我未来的问题。jQuery允许您为选择器中的每个元素分配值，但是使用像这样的普通javascript，您必须迭代每个项（从querySelectorAll）单独设置文本内容。我想继续使用vanillaJS。好的，我可以接受手动选择，但是我如何选择第三个较大的正方形的内部正方形？你也可以使用选择器，

document.querySelectorAll（'.o3.isq'）

你试过

document.querySelectorAll（）

？它根本不起作用：）但如果我只想选择特定父类的类，它无法解决我未来的问题（我认为），jQuery允许您为选择器中的每个元素分配值，但对于像这样的普通javascript，您必须这样做