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