While循环和Jquery追加不工作答案

【问题标题】：While loop and Jquery append Not workingWhile循环和Jquery追加不工作
【发布时间】：2016-06-10 12:08:03
【问题描述】：

这里是第一个问题！希望您能够帮助我。我正在尝试使用 Javascript while 循环并排制作 16 个正方形，但我不明白为什么它不起作用。我是 Javascript 和 jQuery 的新手，所以如果答案太简单，请见谅。提前谢谢你。

$(document).ready(function() {
  var divs = $("<div class='square'></div>");
  var i = 0;
  while (i < 17) {
    $("#wrapper").append(divs);
    i++;
  }

});

#wrapper {
  width: 600px;
  margin: 70px auto;
}
.square {
  width: 40px;
  height: 40px;
  display: inline-block;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="wrapper">

    <div class="square"></div>

  </div>
</body>

强文本

【问题讨论】：

我们看不到 for 循环。你是说while循环吗？
标题中提到的for循环在哪里？

标签： javascript jquery html loops while-loop

【解决方案1】：

在循环中，每次迭代都需要创建一个新对象，否则就像多次替换同一个元素一样

所以你可以clone()循环中的元素

$(document).ready(function() {
  var divs = $("<div class='square'></div>");
  var i = 0;
  while (i < 17) {
    $("#wrapper").append(divs.clone());
    i++;
  }

});

#wrapper {
  width: 600px;
  margin: 70px auto;
}
.square {
  width: 40px;
  height: 40px;
  display: inline-block;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="wrapper">

  <div class="square"></div>

</div>

【讨论】：

【解决方案2】：

更新这部分代码：

var divs =  "<div class='square'></div>";

所以你的代码将是：

$(document).ready(function() {
  var divs =  "<div class='square'></div>";
  var i = 0;
  while (i < 17) {
    $("#wrapper").append(divs);
    i++;
  }

});

#wrapper {
  width: 600px;
  margin: 70px auto;
}
.square {
  width: 40px;
  height: 40px;
  display: inline-block;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="wrapper">

    <div class="square"></div>

  </div>
</body>

【讨论】：

【解决方案3】：

你想追加 div 所以只需在 divs var 中编写 html 代码

将您的代码更改为

var divs = "<div class='square'></div>"

而不是

var divs = $("<div class='square'></div>");

【讨论】：