将<p>插入到div中Jquery

Question

我正在开发一个网站，我有这样的HTML代码：
```html

我正在开发一个网站，我有这样的HTML代码：

```

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

所以，我想把<p>放进像这样的

中

。

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

我尝试这样做：

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

但是我不知道如何切换到 .new-1 然后是 .new-2 等等...

感谢您的帮助！

- Corentin Branquet

---

这些附加操作的逻辑是什么？你想达到什么目的？实际上任务不太清楚。作为参考，您可以查看jQuery操作以进行DOM交互，我认为这将使其更清晰明了。 - Farside

Answer 1

您可以使用 each(), append(), 和 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>

- Ibrahim Khan

Answer 2

这也可以使用%运算符来完成，像这样：

jQuery:

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

输出：

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

请查看此JS Fiddle中的演示： https://jsfiddle.net/igor_9000/g219zjah/。希望这有所帮助。

- Adam Konieska

Answer 3

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>

- Rino Raj

Answer 4

你必须使用以下的jQuery

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

这将会在 new-1 中添加 .thumb-1 和 .thumb-5。

并且可以类似地用于其他元素。

- Gaurav Aggarwal

Answer 5

试试这个

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

});

- Rahul Ravindran