Question

让我们说在这个的情况下，我有4个div称为“.CountThese”，我想这样做，获取具有该特定类的元素数量，然后多次追加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)
}

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

如何实现这一目标？

Answer 1

您可以迭代.CountThese div并为每个div添加.appendHere

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

Answer 2

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

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

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

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

最好的方法是迭代每个.Count这些div像唐和克里斯托弗提到的那样。但是，如果你想按自己的方式去做，你可以这样做：

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

Answer 4

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

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

4 个答案: