Geek asks and answers

JQuery - add one element a certain number of times?

Let's say that in this case I have 4 divs called ".CountThese", and I wanted to do just that, get the number of elements with this particular class, and then add the div as many times as there were ". CountThese" (4 times in this case)

This is html:

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

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

This will be the result:

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

I only have so far that I found out that you can count the number of elements like this:

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

I think I don’t know how to use it. I seriously don't know how I could use this number to add divs or anything else in this case.

How can this be achieved?

+3
source share
4 answers

.CountThese divs .appendHere

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

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

The best way to do this is to iterate over all .CountThese divs, as Don and Christopher said. If you want to do it your way, you can do it like this:

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

More articles:


All Articles