用jquery在两个h2标签之间包装一系列元素

我目前有一个动态创建的页面，如下所示：

a Heading
 
a paragraph
 
a paragraph
 
a paragraph
 
a paragraph
 
a paragraph 

 
a Heading
 
a paragraph
 
a paragraph
 
a paragraph
 
a paragraph
 
a paragraph 

我想要做的是使用jQuery将h2和p标签包装到下一个h2标签：例如：

 
 
a Heading
 
a paragraph
 
a paragraph
 
a paragraph
 
a paragraph
 
a paragraph
  

 
 
a Heading
 
a paragraph
 
a paragraph
 
a paragraph
 
a paragraph
 
a paragraph
  

到目前为止，我没有成功管理这个，但已经使用来自用户的代码（无法找到原始文章的链接）：

 $('.report-content h2').each(function(){ var $set = $(); var nxt = this.nextSibling; while(nxt) { if(!$(nxt).is('.report-content h2')) { $set.push(nxt); nxt = nxt.nextSibling; } else break; } $set.wrapAll('
'); }); 

我得到的是div只包含p标签，但需要包含相关的h2标签，通常是p标签上方的标签。

Answer 1

干得好。 拿下每个h2 ，抓住所有的sibilings直到你得到另一个h2 （或者这个级别没有元素），然后将h2包括在集合中。 这是JSFiddle。

 $('.report-content h2').each(function(){ var $set = $(this).nextUntil("h2").andSelf(); $set.wrapAll('
'); }); 

或正如斯科特指出的那样

 $('.report-content h2').each(function(){ $(this).nextUntil("h2").andSelf().wrapAll('
'); }); 

JQuery文档

• nextUntil
• andSelf

Answer 2

 $('.report-content h2').each(function(){ var $set = $(this); // this is your key ;) var nxt = this.nextSibling; while(nxt) { if(!$(nxt).is('.report-content h2')) { $set.push(nxt); nxt = nxt.nextSibling; } else break; } $set.wrapAll('
'); }); 

见http://jsfiddle.net/mMpVB/

Answer 3

PS如果有人正在寻找jQuery 1.8+的答案，不推荐使用addSelf()而转而使用addBack() 。

对@ Hexxagonal的回答的修改对我有用：

 $('.report-content h2').each(function(){ var $set = $(this).nextUntil("h2").addBack(); $set.wrapAll('
'); }); 

看到：

• https://api.jquery.com/andself/
• https://api.jquery.com/addBack/

Answer 4

查看JQuery的nextUntil（）函数