Question

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

我当前的HTML包含跟随p的任意数量的 h4，如下所示：

<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可以跟随h4。
除p之外的其他任何内容都跟随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");
});

使用jQuery

1 个答案: