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

Question

我正在尝试“de-jquery”一些代码。

我有一个像这样的div：

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

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

当前的解决方案使用 jquerynextAll并wrapAll产生以下结果：

超文本标记语言

<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

编辑：哦，你只想跳过第一项\xe2\x80\xa6

\n

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

\n

\r\n

\r\n

// this is how you can grab a node.\n// alternatively you could use document.querySelectorAll\n// (wich will be similar to how $() works)\nconst blue = document.querySelector(\'.blue\');\n\n// if you desire to use querySelectorAll you can have something similar to\n// .each() like: [...document.querySelectorAll(\'.blue\')].map(element => {});\n\n// this is not a necessity but keeps code a little more organized,\n// instead of throwing this into line 22.\nconst nodes = [];\nlet element = blue;\nwhile(element = element.nextElementSibling) {\n  nodes.push(element);\n}\n\n// let\'s create a new div\nconst wrapper = document.createElement(\'div\');\n// and add the classname of your desire.\nwrapper.classList.add(\'wrapper\');\n// now let\'s append all nodes:\nwrapper.append(...nodes);\n\n// and append the wrapper to the .main div:\nblue.parentNode.appendChild(wrapper);\n\n// and for the fun of it, let\'s display the outcome:\ndocument.body.appendChild(document.createElement(\'code\')).textContent = blue.parentNode.outerHTML;

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n

\n

我刚刚意识到你只想在第一个子\xe2\x80\xa6 之后进行迭代

\n

那么让我们试试这个：

\n

\r\n

\r\n

// let\'s grab the main element:\nconst main = document.querySelector(\'#main\');\n// you could also do this: document.querySelector(\'.blue\').parentNode;\n\n// now let\'s grab the children of that node and strip the first one:\nconst nodes = [...main.children].splice(1);\n\n// now let\'s create the wrapper div\nconst wrapper = document.createElement(\'div\');\nwrapper.classList.add(\'wrapper\');\n\n// and append all children:\nwrapper.append(...nodes);\n\n// and ofc add the wrapper to the container:\nmain.appendChild(wrapper);

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n