for循环跳过间隔javascript

Question

美好的一天！ 我正在尝试进行for循环，但问题是它会跳过其他所有数字。我对导致它的原因一无所知。它不会给1,2,3等等，而是给我1,3,4等。我怎么能阻止它跳过间隔？这是视觉结果（http://imgur.com/M3MBYox）

var cols = document.getElementsByClassName("col");   
var seatNum = 0;

for (var i = cols.length -1; i >= 0; i--) {
  if (i % 2 === 0) {
    for (var j = 0; j < cols[i].childNodes.length; j++) {
      cols[i].childNodes[j].innerHTML = seatNum;
      seatNum++;
    }
  } else {
    for (var j = cols[i].childNodes.length - 1; j >= 0; j--) {
      cols[i].childNodes[j].innerHTML = seatNum;
      seatNum++;
    }
  }
}

Codepen代码段：http://codepen.io/anon/pen/KVbGKJ

Answer 1

问题是您正在尝试访问子节点，其中包括/计算每列中的div和td。因此，您的代码执行的次数比预期的多。而不是使用子节点使用'getElementByTagName（）'

Answer 2

问题是您要修改childNodes而不是children cols[i]。它们不是同一件事。检查以下图像。节点和元素（子）是不同的东西。 childNodes和children的长度不同。这导致了问题。

使用children代替childNodes，它会起作用。但是还有另一个问题。编号将从0开始。要解决此问题，只需从1开始seatNum。

var cols = document.getElementsByClassName("col");
var seatNum = 1;

for (var i = cols.length - 1; i >= 0; i--) {
  if (i % 2 == 0) {
    for (var j = 0; j < cols[i].children.length; j++) {
      cols[i].children[j].innerHTML = seatNum;
      seatNum++;
    }
  } else {
    for (var j = cols[i].children.length - 1; j >= 0; j--) {
      cols[i].children[j].innerHTML = seatNum;
      seatNum++;
    }
  }
}

var cols = document.getElementsByClassName("col");
var seatNum = 1;

for (var i = cols.length - 1; i >= 0; i--) {
  if (i % 2 == 0) {
    for (var j = 0; j < cols[i].children.length; j++) {
      cols[i].children[j].innerHTML = seatNum;
      seatNum++;
    }
  } else {
    for (var j = cols[i].children.length - 1; j >= 0; j--) {
      cols[i].children[j].innerHTML = seatNum;
      seatNum++;
    }
  }
}

.col,
.column {
  float: left;
}

.col div,
.column div {
  float: left;
  clear: left;
  width: 20px;
  height: 20px;
  margin: 2px;
  border: 1px solid black;
}

hr {
  clear: left;
}

<div class="col">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="col">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="col">
  <div></div>
  <div></div>
  <div></div>
</div>

<hr> Should look like this
<div class="column">
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>
<div class="column">
  <div>6</div>
  <div>5</div>
  <div>4</div>
</div>
<div class="column">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

JSFiddle

<小时/> 更新：JSFiddle (your original column structure)

Answer 3

使用.children代替.childNodes ... childNodes包含标记之间的#text节点，children不

同样，将seatNum设置为1，而不是零

var cols = document.getElementsByClassName("col");
var seatNum = 1;

for (var i = cols.length - 1; i >= 0; i--) {
  if (i % 2 == 0) {
    for (var j = 0; j < cols[i].children.length; j++) {
      cols[i].children[j].innerHTML = seatNum;
      seatNum++;
    }
  } else {
    for (var j = cols[i].children.length - 1; j >= 0; j--) {
      cols[i].children[j].innerHTML = seatNum;
      seatNum++;
    }
  }
}

.col,
.column {
  float: left;
}

.col div,
.column div {
  float: left;
  clear: left;
  width: 20px;
  height: 20px;
  margin: 2px;
  border: 1px solid black;
}

hr {
  clear: left;
}

<div class="col">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="col">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="col">
  <div></div>
  <div></div>
  <div></div>
</div>

<hr>
Should look like this
<div class="column">
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>
<div class="column">
  <div>6</div>
  <div>5</div>
  <div>4</div>
</div>
<div class="column">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>