Question

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

<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" />');
});

我得到的是div仅包含p代码，但需要包含关联的h2代码，通常是p代码上方的代码。< / p>

Answer 1

你走了。取每个h2，抓住所有sibilings直到你得到另一个h2（或者这个级别没有元素），然后重新包括集合中的h2。 Here's the JSFiddle.

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

或ScottE指出

$('.report-content h2').each(function(){ 
    $(this).nextUntil("h2").andSelf().wrapAll('<div class="content" />');
});

JQuery文档

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('<div class="content" />');
});

请参阅http://jsfiddle.net/mMpVB/

Answer 3

P.S。如果有人正在为jQuery 1.8+寻找答案，那么{@ 1}}将被弃用，而不是tableRowEntry + wildcard = searchTerm。

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

addSelf()

见：

Answer 4

查看JQuery的nextUntil()函数

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

4 个答案: