Question

Lets say that in this case i have 4 divs called “.CountThese” and i wanted to do just that, get the number of elements with that specific class and then append a div as many times as was the amount of “.CountThese” ( 4 times in this case )

This is the html:

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

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

This would 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 got only so far that i found out that you can count number of elements something like this:

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

thought i dont necessarily know how to use that.. i seriously have no idea how i could then use that number to append divs or anything else for that matter..

How can this be achieved?

Answer 1

You can iterate over the .CountThese divs and for each one, append to .appendHere

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