jQuery - добавить один элемент определенное количество раз?

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 и для каждого добавлять к .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 - количество элементов, которые вы хотите создать.1008 * Это лучше, чем принятый ответ, поскольку он манипулирует 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>

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>');
});