使用jQuery包装或分组元素

Question

我有段落，这些段落没有排列或分组。 现在，我希望使用课程grouped

进行分组

HTML

<p>Para 1</p>
<p>Para 2</p>
<div class="line"></div>
<p>Para 3</p>
<p>Para 4</p>
<p>Para 5</p>

期望结果

<div class="grouped">
    <p>Para 1</p>
    <p>Para 2</p>
</div>

<div class="line"></div>

<div class="grouped">
    <p>Para 3</p>
    <p>Para 4</p>
    <p>Para 5</p>
</div>

我知道wrapAll功能可以帮助您，但它将所有p分组到同一个元素grouped中并且 我需要在不同的grouped元素中

的jsfiddle

JSFiddle

注意

p可能超出上述每个细分

Answer 1

试试此演示this demo。迭代$（“p”）并将它们分组。

$("p").each(function(ix,el){
   if($(el).next().is('.line')) - go to next group
   else add to current

Answer 2

迭代，检查元素是否已经被包装，如果不使用nextUntil来获取段落的集合并将它们包装

$('p').each(function() {
    if ( ! $(this).closest('.grouped').length) 
        $(this).nextUntil('div').addBack().wrapAll("<div class='grouped' />");
});

FIDDLE

Answer 3

这将处理.line代码

之间的多个p

var last = $(".line").length;
var divGroup = '<div class="grouped"/>';
$(".line").each(function(i,e){
    var segment1 = $(this).prevAll("p:not(.grouped)");
    $(segment1.get().reverse()).wrapAll(divGroup);
    if( i == last-1){
        $(this).nextAll("p:not(.grouped)").wrapAll(divGroup);
    }
});

JS Fiddle http://jsfiddle.net/6a87E/5/

Answer 4

您还可以使用简单的while循环：

var $p = $('p').parent();

while($p.children('p').length) {
      $p.children('p:first')
        .nextUntil('.line')
        .addBack()
        .wrapAll('<div class="grouped"/>');
}

http://jsfiddle.net/LGhND/