使用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"); 
});