在新div中包装多个元素而不破坏它们 - Javscript DOM操作

Question

我正试图'de-jquery'一些代码。

我有一个像这样的div：

<div id="main">
    <div class="blue"></div>
    <div class="green"></div>
    <div class="yellow"></div>
</div>

我希望在除第一个之外的所有元素周围插入一个包装器div。完整数量的元素尚未确定，可能会有更多。

当前解决方案使用jquery nextAll和wrapAll来产生以下结果：

HTML

<div id="main">
    <div class="blue"></div>
    <div class="wrapper">
        <div class="green"></div>
        <div class="yellow"></div>
    </div>
</div>

的jQuery

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

如何从中删除所有jQuery并使其成为vanilla？

我看不到任何wrap类型的方法。我可以抓取没有[0]索引的HTML并将其插入到新的div中，然后在.blue之后插入，但这看起来很混乱。还有更好的方法吗？

Answer 1

编辑：哦，你只想跳过第一项......

将此解决方案跳到底部的新解决方案。

// this is how you can grab a node.
// alternatively you could use document.querySelectorAll
// (wich will be similar to how $() works)
const blue = document.querySelector('.blue');

// if you desire to use querySelectorAll you can have something similar to
// .each() like: [...document.querySelectorAll('.blue')].map(element => {});

// this is not a necessity but keeps code a little more organized,
// instead of throwing this into line 22.
const nodes = [];
let element = blue;
while(element = element.nextElementSibling) {
  nodes.push(element);
}

// let's create a new div
const wrapper = document.createElement('div');
// and add the classname of your desire.
wrapper.classList.add('wrapper');
// now let's iterate over all nodes we stored earlier:
nodes.map(element => wrapper.appendChild(element));

// and append the wrapper to the .main div:
blue.parentNode.appendChild(wrapper);

// and for the fun of it, let's display the outcome:
document.body.appendChild(document.createElement('code')).textContent = blue.parentNode.outerHTML;

div {
  padding: 2px;
  border: 1px dotted #000;
  min-height: 20px;
  box-sizing: border-box;
  position: relative;
}

<div id="main">
    <div class="blue"></div>
    <div class="green"></div>
    <div class="yellow"></div>
</div>

我刚刚意识到你只想在第一个孩子后迭代......

让我们试试这个：

// let's grab the main element:
const main = document.querySelector('#main');
// you could also do this: document.querySelector('.blue').parentNode;

// now let's grab the children of that node and strip the first one:
const nodes = [...main.children].splice(1);

// now let's create the wrapper div
const wrapper = document.createElement('div');
wrapper.classList.add('wrapper');

// and append all children:
nodes.map(node => wrapper.appendChild(node));

// and ofc add the wrapper to the container:
main.appendChild(wrapper);

div {
  padding: 2px;
  border: 1px dotted #000;
  min-height: 20px;
  box-sizing: border-box;
  position: relative;
}

<div id="main">
    <div class="blue"></div>
    <div class="green"></div>
    <div class="yellow"></div>
</div>

Answer 2

尝试以下代码。

var allBlues = document.querySelectorAll(".blue");
var divWrapper = document.createElement("div");
divWrapper.className = "wrapper";
for(var i = 0; i < allBlues.length; i++){
  // Iterate through all the siblings.
  var tempEle;
  while(tempEle = allBlues[i].nextElementSibling){
    divWrapper.appendChild(tempEle);
  }
}

main.appendChild(divWrapper);

.blue{
  
}

<div id="main">
    <div class="blue"></div>
    <div class="green"></div>
    <div class="yellow"></div>
</div>