jQuery - 追加一个元素特定次数？

Question

假设在这种情况下，我有 4 个名为“.CountThese”的 div，我只想这样做，获取具有该特定类的元素数量，然后多次 append 一个 div “.CountThese”的数量也是如此(在这个案例中是 4 次)

这是 html:

<div class="CountThese"></div>
<div class="CountThese"></div>
<div class="CountThese"></div>
<div class="CountThese"></div>

<div class="appendHere"></div>

结果是这样的:

<div class="CountThese"></div>
<div class="CountThese"></div>
<div class="CountThese"></div>
<div class="CountThese"></div>

<div class="appendHere">
   <div class="appendedDIVs"></div>
   <div class="appendedDIVs"></div>
   <div class="appendedDIVs"></div>
   <div class="appendedDIVs"></div>
</div>

到目前为止，我发现你可以像这样计算元素的数量:

function divcount() {
   var Count =  $('.CountThese').length(); 
   document.write(Count)
}

以为我不一定知道如何使用它..我真的不知道我怎么能用那个数字来 append div 或任何其他与此相关的东西..

如何实现？

Answer 1

您可以使用数组 join() 来避免手动迭代方法如:

$(".appendHere").append(new Array(++n).join('<div class="appendedDivs">New!</div>'));

其中 n 是您要创建的元素的数量。

这比接受的答案更好，因为它只操作 DOM 一次而不是 n 次。

---

var n = $(".CountThese").length;
$(".appendHere").append(new Array(++n).join('<div class="appendedDivs">New!</div>'));

.CountThese {
  display: inline-block;
  width: 46px;
  height: 50px;
  background: royalblue;
}
.appendedDivs {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 5px;
  margin-right:5px;
  color: gold;
  font-weight: bold;
  background: dodgerblue;
}

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

<div class="appendHere"></div>