Insert <p> into div Jquery

Question

I'm working on a website and I've this HTML code like this

<p class="thumb-1"></p>
<p class="thumb-2"></p>
<p class="thumb-3"></p>
<p class="thumb-4"></p>
<p class="thumb-5"></p>
<p class="thumb-6"></p>
<p class="thumb-7"></p>
<p class="thumb-8"></p>

<div class="new new-1"></div>
<div class="new new-2"></div>
<div class="new new-3"></div>
<div class="new new-4"></div>

So, I want to put <p> into divs like this

<div class="new new-1">
 <p class="thumb-1"></p>
 <p class="thumb-5"></p>
</div>
<div class="new new-2">
 <p class="thumb-2"></p>
 <p class="thumb-6"></p>
</div>
<div class="new new-3">
 <p class="thumb-3"></p>
 <p class="thumb-7"></p>
</div>
<div class="new new-4">
 <p class="thumb-4"></p>
 <p class="thumb-8"></p>
</div>

I try this :

$("p").each(function() {
    $('.new').append($this);
});

But I don't know how I can switch to .new-1 then .new-2 ect. ..

Thanks for your help !

Answer 1

You can do it using each(), append() and eq().

var p = $('p[class^="thumb-"]');

$('.new').each(function (i) {
    $(this).append([p.eq(i), p.eq(i + 4)]);
});

div {
    border:1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="thumb-1">thumb-1</p>
<p class="thumb-2">thumb-2</p>
<p class="thumb-3">thumb-3</p>
<p class="thumb-4">thumb-4</p>
<p class="thumb-5">thumb-5</p>
<p class="thumb-6">thumb-6</p>
<p class="thumb-7">thumb-7</p>
<p class="thumb-8">thumb-8</p>

<div class="new new-1"></div>
<div class="new new-2"></div>
<div class="new new-3"></div>
<div class="new new-4"></div>

Answer 2

This can also be done using the % operator like so:

jQuery:

$('p').each(function(i) {
    $('.new-'+((i%4)+1)).append($(this))
})

Output:

<div class="new new-1">
    <p class="thumb-1">thumb-1</p>
    <p class="thumb-5">thumb-5</p>
</div>
<div class="new new-2">
    <p class="thumb-2">thumb-2</p>
    <p class="thumb-6">thumb-6</p>
</div>
<div class="new new-3">
    <p class="thumb-3">thumb-3</p>
    <p class="thumb-7">thumb-7</p>
</div>
<div class="new new-4">
    <p class="thumb-4">thumb-4</p>
    <p class="thumb-8">thumb-8</p>
</div>

See it working in this JS Fiddle: https://jsfiddle.net/igor_9000/g219zjah/

Hope that helps.