使用 JS 将所有元素包装在特定的 div 中（JQ 有效）答案

【问题标题】：Wrap all elements inside a specific div using JS (JQ works)使用 JS 将所有元素包装在特定的 div 中（JQ 有效）
【发布时间】：2018-12-13 10:40:59
【问题描述】：

我试图确定为什么我无法使用 JavaScript 将所有特定元素包装在特定 div 中来让我的代码工作。我读过this one 之类的帖子，但不明白为什么它不能使用查询选择器。

所以我有这个 HTML：

<div class='containerA'>
    <p>random text</p>
</div>
<div class='containerA'>
    <p>random text</p>
</div>

Jquery 已加载到浏览器中，因此在 JS 中使用简单的选择应该可以工作，但它会失败并显示如下错误消息：

document.getElementsByClassName('containerA')[0].wrap('<div></div>') // fails "document.getElementsByClassName(...)[0].wrap is not a function"

此外，循环遍历每个元素以应用于所有使用 JS 的元素失败，可能与上述第一个失败的原因相同：

// "el.wrap is not a function"
for (var el of els) {
    el.wrap('<div class="testWrap"></div>');
}

// "els[i].wrap is not a function"
for (i = 0; i < els.length; i++) {
    els[i].wrap('<div class="testWrap"></div>');
}

// "c.wrap is not a function"
els.forEach((el) => el.wrap('<div class="testWrap"></div>'))

但是使用 jQuery 我可以得到以下工作：

works: $('.containerA').wrap('<div class="testWrap"></div>'); // wraps all elements
works: $('.containerA:first-of-type').wrap('<div class="testWrap"></div>'); // wraps specified element

但使用查询选择器不会：

document.querySelector('.containerA:first-of-type').wrap('<div class="testWrap"></div>'); // fails with error "document.querySelector(...).wrap is not a function"

所以我的主要问题是：

如何使用带有循环的 JS 包装单个元素？
为什么 wrap() 应该适用于所有元素，而 wrapAll() 大概应该适用于所有元素？（我成功的 JQ 代码适用于所有元素）
为什么要使用 wrapAll() 而不是 wrap()？
大概 wrap() 只适用于 jQuery，但大概 JQ 可以与 JS 一起使用，那么为什么在使用查询选择器、通过类名获取文档或任何其他 JS 选择器选择元素后，包装不能工作？

任何解释将不胜感激。有什么明显的我没有得到吗？感谢您在这里的任何建议。

【问题讨论】：

4) 因为 wrap 是由 jQuery 提供的一种方法，并且在提到所有其他方法时，您甚至一开始都不是使用 jQuery 对象，而是使用原生 DOM 元素, 根本没有这样的方法。

标签： javascript jquery

【解决方案1】：

document.querySelector('.containerA:first-of-type') 是一个 valina js HTML 对象，而不是 jquery 的。您必须将其转换为 jquery 对象，然后才能访问 jquery 的功能。

var container = $(document.querySelector('.containerA:first-of-type'));

container.wrap('<div class="testWrap"></div>');

【讨论】：

【解决方案2】：

http://api.jquery.com/wrap/

http://api.jquery.com/wrapall/

Wrap 单独遍历每个匹配的元素，WrapAll 遍历所有元素一次。

必须使用 Jquery 选择器来应用 Jquery 函数，正如错误所说，这些函数在原始元素上不存在。

【讨论】：