Почему цикл for, использующий i ++, увеличивается на 2 вместо 1?

Question

Почему цикл for, использующий i ++, увеличивается на 2 вместо 1?

1

У меня есть логический вопрос о механизме for циклов.

В следующем простом цикле я ожидал, что первые 3 элемента DIV будут иметь свои классы, измененные с box_1 на box_2. Однако вместо ящиков 1, 2 и 3 поворот синего поля 1, 3 и 5 стал синим. Почему кажется, что цикл увеличивается на 2 вместо 1? Я уверен, что я что-то пропустил.

for (let i = 0; i < 3; i++) {
  document.querySelectorAll(".box_1")[i].className = "box_2";
}

.box_1 {
 padding: 8px;
 margin: 0 0 16px 0;
 font-size: 2rem;
 color: white;
 background-color: red;
}

.box_2 {
 padding: 8px;
 margin: 0 0 16px 0;
 font-size: 2rem;
 color: white;
 background-color: blue;
}

<div class="box_1">1</div>
<div class="box_1">2</div>
<div class="box_1">3</div>
<div class="box_1">4</div>
<div class="box_1">5</div>
<div class="box_1">6</div>
<div class="box_1">7</div>
<div class="box_1">8</div>
<div class="box_1">9</div>
<div class="box_1">10</div>

DR01D 26 окт. 2017, в 21:53

Источник

2

Просто небольшой совет, вы можете сделать это с помощью селектора CSS .. например .. for (let el of document.querySelectorAll(".box_1:nth-child(-n+3)")) el.className = "box_2";
Keith 26 окт. 2017, в 19:59

Теги:

javascript

for-loop

2 ответа

4

Каждый раз, когда цикл работает, 0-й элемент box_1 теперь является следующим элементом, так как предыдущий 0-й элемент больше не находится в этом классе. Другими словами, второй раз через цикл это

<div class="box_2">1</div>
<div class="box_1">2</div> <-- This is now the [0] element
<div class="box_1">3</div> <-- This is now the [1] element
<div class="box_1">4</div>
<div class="box_1">5</div>
<div class="box_1">6</div>
<div class="box_1">7</div>
<div class="box_1">8</div>
<div class="box_1">9</div>
<div class="box_1">10</div>

Nick 26 окт. 2017, в 17:59

Ещё вопросы

Просто небольшой совет, вы можете сделать это с помощью селектора CSS .. например .. for (let el of document.querySelectorAll(".box_1:nth-child(-n+3)")) el.className = "box_2";

Joe · Accepted Answer · 2017-10-26T18-29-00.000Z

document.querySelectorAll(". box_1") получает вызов каждого цикла. Вызывает нечетные результаты. Если вы сохраните исходный запрос. Затем ожидаются результаты.

let nodeList = document.querySelectorAll(".box_1");
for (let i = 0; i < 3; i++) {
  nodeList[i].className = "box_2";
}

.box_1 {
 padding: 8px;
 margin: 0 0 16px 0;
 font-size: 2rem;
 color: white;
 background-color: red;
}

.box_2 {
 padding: 8px;
 margin: 0 0 16px 0;
 font-size: 2rem;
 color: white;
 background-color: blue;
}

<div class="box_1">1</div>
<div class="box_1">2</div>
<div class="box_1">3</div>
<div class="box_1">4</div>
<div class="box_1">5</div>
<div class="box_1">6</div>
<div class="box_1">7</div>
<div class="box_1">8</div>
<div class="box_1">9</div>
<div class="box_1">10</div>

Хорошая статья о NodeList vs HTMLCollection https://hackernoon.com/htmlcollection-nodelist-and-array-of-objects-da42737181f9

Большое спасибо, вы на 100% правы! У меня есть один маленький вопрос. Когда я использую ваш код, но меняю его на nodeList = document.getElementsByClassName("box_1"); он снова ломается точно так же. Почему querySelectorAll работает, но getElementsByClassName ? Это я озадачен.
@ DR01D, правильно! querySelectorAll возвращает неживой NodeList. getElementsByClassName возвращает живой HTMLCollection.