jQuery选择标签组

Question

假设我有这样的结构：

<p>Some text random 1</p>
<p>Some text random 2</p>
<p>Some text random 3</p>
<div><img src=""></div>
<p>Some text random 4</p>
<p>Some text random 5</p>

我想在div元素中包含几组p标记，有谁知道最好的方法吗？首选输出为：

<div class="p-tags">
    <p>Some text random 1</p>
    <p>Some text random 2</p>
    <p>Some text random 3</p>
</div>
<div><img src=""></div>
<div class="p-tags">
    <p>Some text random 4</p>
    <p>Some text random 5</p>
</div>

Answer 1

您可以使用wrapAll

$("p").slice(0,3).wrapAll('<div class="p-tags"></div>');
$("p").slice(3,5).wrapAll('<div class="p-tags"></div>');  

Answer 2

要将所有元素包装在一个元素中，可以使用wrapAll

要查找图片上方和下方的元素，可以分别使用prevAll和nextAll。

$('button').on('click', function(){
    $('img').parents('div').prevAll().wrapAll('<div class="p-tags"></div>');
$('img').parents('div').nextAll().wrapAll('<div class="p-tags"></div>');
});

Demo