我目前有一个动态创建的页面,如下所示：
<h2>a Heading</h2> <p>a paragraph</p> <p>a paragraph</p> <p>a paragraph</p> <p>a paragraph</p> <p>a paragraph</p>
<h2>a Heading</h2> <p>a paragraph</p> <p>a paragraph</p> <p>a paragraph</p> <p>a paragraph</p> <p>a paragraph</p>
我想要做的是使用jQuery将h2和p标签包装到下一个h2标签：例如：
<div class="headingName"> <h2>a Heading</h2> <p>a paragraph</p> <p>a paragraph</p> <p>a paragraph</p> <p>a paragraph</p> <p>a paragraph</p> </div>
<div class="headingName"> <h2>a Heading</h2> <p>a paragraph</p> <p>a paragraph</p> <p>a paragraph</p> <p>a paragraph</p> <p>a paragraph</p> </div>
到目前为止,我没有成功管理这个,但已经使用来自用户的代码(无法找到原始文章的链接)：
$('.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 class="content" />');
});
解决方法
干得好.拿下每个h2,抓住所有的sibilings直到你得到另一个h2(或者这个级别没有元素),然后将h2重新包括在集合中.
Here’s the JSFiddle.
$('.report-content h2').each(function(){
var $set = $(this).nextUntil("h2").andSelf();
$set.wrapAll('<div class="content" />');
});
或正如斯科特指出的那样
$('.report-content h2').each(function(){
$(this).nextUntil("h2").andSelf().wrapAll('<div class="content" />');
});
JQuery文档
