将<p>插入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

Working Demo

 $(document).ready(function(){ $("p").each(function(){ var num = $(this).attr('class').split('-')[1] var rem = num % 4; if(rem > 0){ $('.new-'+rem).append($(this)) } else{ $('.new-4').append($(this)) } }); }); 

 .new{ border:1px solid red } 

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

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.

Answer 4

you have to use below jquery

$('.thumb-1, .thumb-5').wrapAll('<div class="new new-1"></div>');

This will add .thumb-1 and .thumb-5 to new new-1.

and use similarly for other elements

Answer 5

Try this

$(document).ready(function(){
$('.new').each(function(index,elem){
    $(this).append($('p.thumb-'+(index+1)));
  $(this).append($('p.thumb-'+(index+5)));
});

});