Question

这是一个两部分问题 - 我有一个HTML页面，我需要重复出现一组元素，例如：

<h2>1</h2>
<p>foo</p>
<p>bar</p>
<h2>2</h2>
<p>fizz</p>

并在每个标题上用div分别包装它们：

<div>
  <h2>1</h2>
  <p>foo</p>
  <p>bar</p>
</div>
<div>
  <h2>2</h2>
  <p>fizz</p>
</div>

我知道按标签名称获取元素，但我无法弄清楚如何获取元素组然后替换它们。

感谢您的帮助。

Answer 1

您可以使用Array.from()，.forEach()循环来迭代h2元素集合，检查.nextElementSibling中.tagName "P"是while如果true，则将元素推送到数组。

在.forEach()元素数组的数组上使用p，创建<div>元素，将h2数组附加index添加到div元素，循环内部数组的每个元素，以.appendChild()元素作为参数调用p。

＆＃13;

var headers = document.querySelectorAll("h2");
var arr = [];

Array.from(headers).forEach(function(h2, index) {
  arr[index] = [];
  var curr = h2.nextElementSibling;
  while (curr.tagName === "P") {
    arr[index].push(curr);
    var next = curr.nextElementSibling;
    curr = next;
  }
});

arr.forEach(function(html, index) {
  var div = document.createElement("div");
  document.body.appendChild(div);
  div.appendChild(headers[index]);
  html.forEach(function(el) {
    div.appendChild(el)
  })
});

＆＃13;

div {
  padding: 4px;
  margin: 4px;
  border: 2px solid green;
}

＆＃13;

<h2>1</h2>
<p>foo</p>
<p>bar</p>
<h2>2</h2>
<p>fizz</p>

＆＃13;

在div中包装reoccuring元素集合

1 个答案: