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

问题是您正在修改 childNodes 而不是 cols[i] 的 children。它们不是同一件事。检查下图。节点和元素( child )是不同的东西。 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)