将多个元素包装在新的div中而不破坏它们-Javascript 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并使其变为香草？

我看不到任何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>