javascript - While 循环和 Jquery 追加不起作用

标签 javascript jquery html loops while-loop

第一个问题在这里!希望你能帮我。我正在尝试使用 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>

强文字

最佳答案

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

所以你可以 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>

关于javascript - While 循环和 Jquery 追加不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35665897/

相关文章:

javascript - Bootstrap日期选择器键盘导航: select date when "tabbing out"

html - body 阴影 CSS

javascript - 如何在文本框下居中jquery datepicker

javascript - 将 env 选项与非 env 选项合并时的 Babel 插件顺序

javascript - Durandal 2.0 - 更新 View 中可观察值的值

javascript - <a> 标记上的 Jquery 单击事件未正确触发

jquery - 如何使 Accordion 元素可排序和可拖动

javascript - 多个追加不工作 jQuery

javascript - Angularjs:如何将输入值传递给函数?

javascript - 当用户单击 javascript mottie 虚拟键盘按键之间的小空间时,有没有办法防止元素的焦点模糊?