Почему моя переменная становится неопределенной после изменения отображения другой переменной?

Question

Я пытаюсь скрыть определенные строки с определенным уникальным идентификатором.пример:

<tbody id="row0">
  <tr class="state0"></tr>
  <tr class="state1"></tr>
  <tr class="state2"></tr>
  <tr class="state3"></tr>
</tbody>

Я могу найти определенную строку с помощью:

var state0 = document.getElementById('row0').getElementsByClassName('state0');
var state1 = document.getElementById('row0').getElementsByClassName('state1');

, затем скрыть две строки, например:

for (let index in state0) {state0[index].style.display = 'none'}
for (let index in state1) {state1[index].style.display = 'none'}

, и в итоге получаю ошибкуговоря, что состояние1 больше не определяется, как только я скрываю строку состояния0.Это происходит всякий раз, когда я скрываю одну строку, следующая становится неопределенной, даже после того, как я сразу получаю элемент по идентификатору.Может кто-нибудь помочь мне и объяснить, почему это происходит?

Answer 1

<tbody id="row0">
  <tr class="state0"></tr>
  <tr class="state1"></tr>
  <tr class="state2"></tr>
  <tr class="state3"></tr>
</tbody>

var state0 = document.querySelector('#row0 > .state0');
var state1 = document.querySelector('#row0 > .state1');

state0.style.dysplay = 'none';
state1.style.dysplay = 'none';

Кроме того,

for (index in state0) {
   // index will be a property of the state0 object
   // state0 is not an array and has other properties than child indices, for example length, item, namedItem ...
   // state0['length'] have not property 'style'
}

Вы можете использовать

for (var i = 0; i <state0.length; i ++) {
   var indexOfChild = state0 [i];
   ...
}