在 new 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>

---

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

那我们试试这个：

// 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>