javascript - 将 插入 div Jquery

Question

我在一个网站上工作，我有这样的 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

<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等。 ..

感谢您的帮助!

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>