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

您需要遍历#version 430 layout (location=0) in vec3 vertPos; layout (location=1) in vec3 vertNormal; void main(void) { ... // convert vertex position to view space vec4 P = mv_matrix * vec4(vertPos,1.0); // looks good // convert normal to view space vec3 N = normalize((norm_matrix * vec4(vertNormal,1.0)).xyz); // why to vec4 and back to vec3? ... }，并在循环中使用.nextUntil()选择h2的下一个兄弟姐妹，并使用.wrapAll()

将选定的元素包装在新标记中

h2

$("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;
}

Answer 2

您可以使用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>

然后您可以使用querySelectorAll方法来获取该信息，

function wrapElement(el, wrapper) {
    el.parentNode.insertBefore(wrapper, el);
    wrapper.appendChild(el);
}

var createElem = document.createElement('div');
createElem.className='wrapper';

wrapElement(document.querySelectorAll('.insideElement'), createElem);

希望这会有所帮助！

如何包装H2标记，直到使用JavaScript在wrapper div中找到下一个H2为止？

2 个答案: