jQuery - 如何将一个元素多次添加到页面？

Question

假设在这个例子中，我有4个名为".CountThese"的div，我想要做的就是获取具有该特定类的元素数量，然后根据“.CountThese”的数量（在这种情况下是4次）添加相同数量的div。

以下是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)
}

虽然我不一定知道如何使用它，但我真的不知道我怎么能够使用那个数字来添加div或其他任何内容。

这该怎么做呢？

- Joonas

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>

- T J

Answer 2

您可以迭代遍历所有 .CountThese div 元素，并针对每个元素向 .appendHere 元素进行追加。

$('.CountThese').each(function(){
  $('.appendHere').append('<div class="appendedDivs"></div>');
});

- Don Zacharias

---

这似乎太简单了.. 谢谢。 - Joonas

jQuery：它几乎太简单了。 - Don Zacharias

Answer 3

最好的方法是像Don和Christopher提到的那样遍历每个.CountThese div。如果你想按自己的方式做，可以这样做：

var count = $('.CountThese').size();
for (var i=0; i<count; i++){
    $('div.appendHere').append('<div class="appendedDIVs"></div>');
}

- Eric Yang

Answer 4

$('.CountThese').each(function() {
    $('div.appendHere').append('<div class="appendedDIVs"></div>');
});

- Christopher Armstrong