javascript - 用纯 Javascript 将具有相同类的元素彼此相邻包装

Question

寻找一种在包装器中使用相同类将元素彼此相邻包装的方法。这可以在 jquery 中轻松完成，但我正在努力寻找纯 JS 的方法。我能够删除 .group 之间的空标签，但不确定如何包装这些元素。
http://jsfiddle.net/chille1987/6cnjgft0/4/
当前的 HTML

<div class="group">1</div>
<div class="group">2</div>
<p><br /></p>
<div class="group">3</div>

<p>Lorem ipsum dolor sit amet</p>

<section>
    <div class="group">4</div>
    <div class="group">5</div>
</section>

<p>Lorem ipsum dolor sit amet</p>

<div class="group">6</div>

预期的 HTML

<div class="wrapper">
    <div class="group">1</div>
    <div class="group">2</div> 
    <div class="group">3</div>
</div>

<p>Lorem ipsum dolor sit amet</p>

<section>
    <div class="wrapper">
        <div class="group">4</div>
        <div class="group">5</div>
    </div>
</section>    

<p>Lorem ipsum dolor sit amet</p>

<div class="wrapper">
    <div class="group">6</div>
</div>

Javascipt

// Create Wrapper
let wrapper = document.createElement('div');
wrapper.classList.add('wrapper');

// Add class to br parent
let brTags = document.querySelectorAll('br:first-child');
brTags.forEach(empty => {
    empty.parentNode.classList.add('empty-paragraph');
});

// remove empty paragraphs between groups
const empty = document.querySelectorAll('.empty-paragraph');
empty.forEach(paragraph => {
    if (paragraph.nextElementSibling.classList.contains('group') && paragraph.previousElementSibling.classList.contains('group')) {
        paragraph.remove();
    }
});

Answer 1

我想我会逐个执行，并且我会在一次传递中删除“空白”段落，然后在另一传递中将内容分组(您可以一次完成所有操作，但它更复杂)。
内联查看评论:

// A function to handle one parent
function groupChildren(parent) {
    let child;

    // Remove "blank" paragraphs first
    child = parent.firstElementChild;
    while (child) {
        // Grab this first, since we may remove `child`
        const next = child.nextElementSibling;
        if (!child.classList.contains("group")) {
            // "Blank" means it has nothing but BR elements or blank text nodes
            const remove = child.tagName === "P" && Array.from(child.childNodes).every(c =>
                (c.nodeType === Node.TEXT_NODE && !c.nodeValue) ||
                (c.tagName === "BR")
            );
            if (remove) {
                parent.removeChild(child);
            }
        }
        child = next;
    }

    // Find and group .group paragraphs
    let group;
    child = parent.firstElementChild;
    while (child) {
        const next = child.nextElementSibling;
        if (child.classList.contains("group")) {
            if (!group) {
                // No group yet, create one and insert it
                group = document.createElement("div");
                group.classList.add("wrapper");
                parent.insertBefore(group, child);
            }
            // Move this into the current group
            group.appendChild(child);
        } else {
            // Break the group here
            group = null;
        }
        child = next;
    }
}

// Handle all of the `.group` elements; often later ones will have been
// handled when handling earlier ones in the same parent, so check for that
for (const child of Array.from(document.getElementsByClassName("group"))) {
    if (!child.parentElement.classList.contains("wrapper")) {
        groupChildren(child.parentElement);
    }
}

<div class="group">1</div>
<div class="group">2</div>
<p><br /></p>
<div class="group">3</div>

<p>Lorem ipsum dolor sit amet</p>

<section>
    <div class="group">4</div>
    <div class="group">5</div>
</section>

<p>Lorem ipsum dolor sit amet</p>

<div class="group">6</div>