Javascript:for语句不处理数组中的所有元素

Question

我有一个数组，里面有各个段落:

var content = [ "<p>This is a paragraph 1</p>", 
                "<p>This is a paragraph 2</p>", 
                "<p>This is a paragraph 3</p>", 
                "<p>This is a paragraph 4</p>", 
                "<p>This is a paragraph 5</p>" ]

我想对数组内的每个元素执行一个简单的操作。每个段落都需要放置在一个容器中，然后从数组中删除。 这是相应的 HTML:

<div class="article">
  <div id="cell1" class="text-block">
    <div class="container"></div>
  </div>
</div>

这就是我尝试做上面描述的事情的方式:

for (i = 0; i < content.length; i++) {
  console.log("Current item: " + content[i])
  //
  var itemtoRemove = content[i];
    $("#cell1 .container").append(content[i]);
  //
  content.splice($.inArray(itemtoRemove, content), 1)
}

我也将所有内容放在一起:https://jsfiddle.net/johschmoll/1mjzu4qg/71/

基本上，一切都工作正常，但 for 语句似乎跳过了数组中的每个第二个元素。即使看过类似的案例，我也无法弄清楚原因。我在这里做错了什么？

Answer 1

由于您在循环时修改数组，因此请使用 while 循环来检查数组是否为空

while (content.length) {
  console.log("Current item: " + content[0])
  //
  var itemtoRemove = content[0];
    $("#cell1 .container").append(content[0]);
  //
  content.shift();
}

请记住，如果您所做的只是附加所有元素，那么这是不必要的。 append() 可以接受数组

$("#cell1 .container").append(content.splice(0));