Question

我有一个带标题的html页面。我想使用javascript或任何本机库对标题下的内容（html）进行分组。我怎样才能做到这一点？示例如下

<div>
  <h2>Main</h2>
  <p> Content goes here</p>
  <img src="someimg.jpg"/>
  <h2>Main2</h2>
  <p> Content goes here</p>
  <img src="someimg.jpg"/>
  <h2>Main3</h2>
  <p> Content goes here</p>
  <img src="someimg.jpg"/>
</div>

输出应为

<div>
  <div>
    <h2>Main</h2>
    <p> Content goes here</p>
    <img src="someimg.jpg"/>
  </div>
  <div>
    <h2>Main2</h2>
    <p> Content goes here</p>
    <img src="someimg.jpg"/>
  </div>
  <div>
    <h2>Main3</h2>
    <p> Content goes here</p>
    <img src="someimg.jpg"/>
  </div>
</div>

Answer 1

试试这个：

FileString.split(" ")

$("h2").each(function(){
    $(this).nextUntil("h2").addBack().wrapAll("<div class='wrapper'>");
});

.wrapper{
  border-bottom:1px solid red;
}

Answer 2

这应该做你需要的事情

＆＃13;

<div>
  <h2 style="margin-bottom: 0;">Main</h2>
  <p style="margin-top: 0;"> Content goes here</p>
  <img src="someimg.jpg"/>
  <h2 style="margin-bottom: 0;">Main2</h2>
  <p style="margin-top: 0;"> Content goes here</p>
  <img src="someimg.jpg"/>
  <h2 style="margin-bottom: 0;">Main3</h2>
  <p style="margin-top: 0;"> Content goes here</p>
  <img src="someimg.jpg"/>
</div>

＆＃13;

在javascript中将标题标签之间的html分组

2 个答案: