javascript - 为什么这个forEach循环是嵌套的？

Question

为糟糕的代码道歉..这一个的荒谬兼容性正在测试我的 Vanilla JS 金属:

我需要将每个 header 及其兄弟节点(直到到达下一个 header )包装在一个 div 中。为什么 wrap 函数会创建嵌套的包装器 div(标记为“部分”)？

初始状态:

<h1></h1>
<p></p>
<p></p>
<h2></h2>
<p></p>
<p></p>

例如，想要的结果:

<div class="section">
  <h1></h1>
  <p></p>
  <p></p>
</div>
<div class="section">
  <h2></h2>
  <p></p>
  <p></p>
</div>

当前结果:

<div class="section">
  <h1></h1>
  <p></p>
  <p></p>
  <div class="section">
    <h2></h2>
    <p></p>
    <p></p>
  </div>
</div>

当然，兄弟节点数组越大，嵌套越深。我知道这很简单，但我无法理解(双关语)我的头脑。

这是我的 JavaScript 代码:

// Filter for grouping like elements together
var getNextUntil = function (elem, selector, group) {
  // Setup siblings array and get next sibling
  var siblings = [];
  var next = elem.nextElementSibling;
  // Loop through all siblings
  while (next) {
      var isClass = next.className.split(' ').some(function (c) {
          var re = new RegExp(selector);
          return re.test(c);
      });
      // Check if grouping is set
      if (group == false) {
          // If the matching selector is found
          if (isClass == true) break;
           // Otherwise, push to array              
      } else {
          if (isClass == false) break;
      }
      siblings.push(next);
      // Get the next sibling
      next = next.nextElementSibling;    
  }
  return siblings;
};
var headers = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
Array.prototype.forEach.call(headers, function(el, i){
  el.classList.add('header');
  var sibs = getNextUntil(el,'header', false);
  var section = document.createElement('div');
  section.className = 'section';
  function wrap(el, wrapper) {
    el.parentNode.insertBefore(wrapper, el);
    wrapper.appendChild(el);
  }

  wrap(el,section);
  Array.prototype.forEach.call(sibs, function(el, i){
    section.appendChild(el);
  })

});

非常感谢任何帮助。

Answer 1

我不确定您到底想完成什么，但下面的代码使用您在互操作性方面使用的相同功能，使用 Vanilla JavaScript 实现了您的既定目标。

const headers = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
// reference to the parent element
let parent = document.getElementById('within');
// use STATIC DOM NodeList - selects all direct children of the parent
let withinParent = document.querySelectorAll('#within > *');

for (let child of withinParent) {
  // A header will create a new div
  if (headers.includes(child.nodeName.toLowerCase())) {
    if (wrapper) parent.appendChild(wrapper);
    var wrapper = document.createElement('div');
    wrapper.classList.add('section');
    // this is the header element
    wrapper.appendChild(child);
    continue;
  }
  if (child.nodeName !== 'SCRIPT') {
    // Add elements until we find another header
    wrapper.appendChild(child);
  }
}
// include final div for the final header
parent.appendChild(wrapper);
console.log(parent);

.section {
  margin-bottom: 2em;
  padding: 1em;
  background-color: lightblue;
}

<div id='within'>

  <h1>Header 1</h1>
  <p>Sibling 1</p>
  <p>Sibling 2</p>
  <p>Sibling 3</p>

  <h2>Header 2</h2>
  <p>Sibling 1</p>
  <p>Sibling 2</p>

  <h3>Header 3</h3>
  <p>Sibling 1</p>
  <p>Sibling 2</p>

  <h4>Header 4</h4>
  <p>Sibling 1</p>
  <p>Sibling 2</p>
  <p>Sibling 3</p>

</div>