jQuery - 附加一个元素特定的次数？答案

【问题标题】：jQuery - Append one element specific amount of times?jQuery - 附加一个元素特定的次数？
【发布时间】：2011-09-12 21:48:35
【问题描述】：

假设在 this 的情况下，我有 4 个名为“.CountThese”的 div，我想这样做，获取具有该特定类的元素数量，然后多次附加一个 div就像“.CountThese”的数量一样（在 this 情况下是 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)
}

以为我不一定知道如何使用它..我真的不知道如何使用该数字来附加 div 或其他任何东西..

如何做到这一点？

【问题讨论】：

标签： jquery html count append

【解决方案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>

【讨论】：

【解决方案2】：

您可以遍历 .CountThese div，并将每个 div 附加到 .appendHere

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

【讨论】：

这似乎太简单了。。谢谢。
"jQuery：简直太简单了。"

【解决方案3】：

最好的方法是遍历每个 .CountThese div，比如 Don 和 Christopher 提到的。但是，如果您想按照自己的方式进行操作，则可以这样做：

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

【讨论】：

【解决方案4】：

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

【讨论】：