Mam siatkę 6 dużych kwadratów i wewnątrz każdego kwadratu znajduje się 9 mniejszych kwadratów. Zajęcia wewnętrzne kwadraty są nazwane I1, I2, I3 i tak dalej.

Stworzyłem więc pętlę, aby zmienić textContent elementów klasy z:

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

HTML wygląda tak:

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

Jednak tylko elementy klasy "Square O1" otrzymały nowe treści, reszta kwadratów nie wygląda teraz teraz:

obraz tutaj

Moje pytanie brzmi: jak ustawić nowe treści wszystkim przedmiotom tych klas. Ale lepsze pytanie brzmi: jak go kontroluję? W przyszłości będę chciał tylko zmienić treść, powiedzmy "Kwadratowe O3" Klasy dzieci, więc nie będę chciał zmienić ich wszystkich.

Edytować:

Może warto dodać, że mógłbym osiągnąć tylko dodawanie textContent za pomocą Queryselectora. Nie działa z GettelementsByClassName lub Queryselectorall i szczerze mówiąc Nie wiem dlaczego.

1
BigPaws 27 czerwiec 2017, 23:13

4 odpowiedzi

Najlepsza odpowiedź

Powinieneś użyć innej pętli for, więc kończy się coś w rodzaju:

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

A jeśli chcesz to zrobić tylko dla pewnej grupy (powiedzmy o3), spróbuj:

for(var i = 0; i < 9; i++){
  document.querySelector('.o3 .i'+(i+1)).textContent = i+1;
}
0
Piyin 27 czerwiec 2017, 20:33

document.querySelector() Zwraca tylko pierwszy element na stronie. Będziesz chciał użyć document.getElementsByClassName();. Zwraca to szereg wszystkich elementów, które mają tę klasę.

Więc możesz:

for(var i = 0; i < 9; i++){
    document.getElementsByClassName('i'+(i+1)).forEach(function(el) {
        el.textContent = i+1;
    }
}
0
Alex Bieg 27 czerwiec 2017, 20:32

Może być konieczne użycie Document.QuerySelectorallall ().

Musisz także zrobić kolejną pętlę wewnątrz dużej pętli do pokrycia div s z klasami o1, o2 i 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>
0
Mohamed Abbas 27 czerwiec 2017, 20:29

document.querySelector Zwraca pojedynczy element (pierwszy znaleziony węzeł).

Jeśli chcesz pętlować 3 elementy, które pasują do wzoru, można użyć querySelectorAll, który zwróci tablicę ou pętli .square element, a następnie dziecko iNUMBER.

0
Wanderson Silva 27 czerwiec 2017, 20:24