如何使用javascript将h2标签包装到包装div中找到的下一个h2？

Question

我有一个基本的HTML文件。它本质上是一篇博客文章内容，<h2>标签分隔不同的内容区域。

<h2>Header A</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
<h2>Header B</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
<h2>Header C</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>

我想要做的是让JavaScript在它看到的wrapper标签的开头添加一个HTML <h2>类，并在看到下一个<h2>标签时关闭它。

通过这种方式，我可以在markdown中自然地编写博客内容，但可以自定义网站的外观。所以我可以专注于内容而不是忘记我是否正确地关闭了标签

下面是一个简单的例子，我添加了边距，填充和不透明悬停效果。这是我想要的最终结果。

<h2>标签都将在DOM中处于同一级别。

.wrapper {
  background-color: lightgray;
  padding: 20px;
  margin: 20px;
  opacity: 0.5;
}
.wrapper:hover{
  opacity:1;
}

<div class="wrapper">
  <h2>Header A</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
</div>
<div class="wrapper">
  <h2>Header B</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
</div>
<div class="wrapper">
  <h2>Header C</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
</div>

我想我可以使用document.querySelector("h2")，或某种:nth-of-type伪选择器，在下一个<h2>之前抓住元素，并为所有东西添加父类。但我不完全确定这是如何实施的。

Answer 1

你需要循环通过h2并在循环中使用h2选择.nextUntil()的下一个兄弟姐妹并使用.wrapAll()将所选元素包装在新标签中

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

.wrapper {
  background-color: lightgray;
  padding: 20px;
  margin: 20px;
  opacity: 0.5;
}
.wrapper:hover{
  opacity:1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Header A</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
<h2>Header B</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
<h2>Header C</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>

Answer 2

您可以使用qazxsw poi函数在qazxsw poi中实现此功能

像这样的东西，

编辑

有一个（相同的）虚拟类分配给你的parentNode.insertBefore和javascript这样的标签，

h2

然后你可以使用p方法得到它，

<div class="wrapper">
  <h2 class="insideElement">Header B</h2>
  <p class="insideElement">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
  <p class="insideElement">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus.</p>
</div>

希望这可以帮助！