使用jQuery将头段分隔的段落序列转换为Bootstrap面板

Question

我有一个网页，其中HTML是从Markdown生成的，我想在不添加任何HTML/Markdown的情况下使用jQuery实现以下功能（例如，类，ID ...）到页面。

我目前的HTML包括遵循h4小号p秒的任意数，它看起来像以下：

<h4>Foo</h4> 
<p>...</p> 
<p>...</p> 

<h4>Bar</h4> 
<p>...</p> 
<p>...</p> 
<p>...</p> 
<p>...</p> 

<h4>Baz</h4> 
<p>...</p> 
<p>...</p> 
<p>...</p> 

我想什么来实现的，在短短的jQuery代码可能，是把它转换成如下：

<div class="panel panel-default"> 
    <div class="panel-heading">Foo</div> 
    <div class="panel-body"> 
    <p>...</p> 
    <p>...</p> 
    </div> 
</div> 

<div class="panel panel-default"> 
    <div class="panel-heading">Bar</div> 
    <div class="panel-body"> 
    <p>...</p> 
    <p>...</p> 
    <p>...</p> 
    <p>...</p> 
    </div> 
</div> 

<div class="panel panel-default"> 
    <div class="panel-heading">Baz</div> 
    <div class="panel-body"> 
    <p>...</p> 
    <p>...</p> 
    <p>...</p> 
    </div> 
</div> 

什么jQuery代码可以做到这一点？

一些制约因素：

• 任意数量的p S可遵循h4。
• 没有别的，只有p s遵循h4;例如你永远不会得到[h4,p,p,div,p]。
• 在此页面以外的其他地方没有其他h4。
• 页面上还有其他p（例如页眉，页脚）。
• 除p之外的任何内容都可以遵循最终的[h4,p,p，...]序列。

Answer 1

这似乎工作：选择所有h4标签循环通过每个，并将元素包装在所需的div标签。希望这可以帮助！让我知道你是否有任何问题。

// selecet all h4 tags, loop through each 
$("h4").each(function(){ 
    // variable b being h4 tags next element 
    var b=$(this).next(); 
    //replace h4 with div tag and panel classes 
    $(this).replaceWith("<div class='panel-heading wrapgroup'>"+$(this).text()+"</div>"); 

    // While loop to check the p tags followed by h4 
    while(check){ 
    if(b.is("p")){ 
     $(b).addClass("wrapgroup wrapgroupptag"); 
     b = $(b).next(); 
    } 
    else { 
     break; 
    } 
    } 

    //.wrapgroup will mark h4 and p tags and is replaced with panel tags 
    $(".wrapgroup").wrapAll("<div class='panel panel-default'></div>"); 

    //.wrapgroupptag will mark all the p tags next to h4 
    $(".wrapgroupptag").wrapAll("<div class='panel-body'></div>"); 

    // remove all the classes 
    $(".wrapgroup").removeClass("wrapgroup"); 
    $(".wrapgroupptag").removeClass("wrapgroupptag"); 
});