Question

我试图确定为什么我无法使用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包装单个元素？
为什么在wrapAll（）应该应该适用的情况下，wrap（）是否适用于所有元素？（我成功的JQ代码适用于所有元素）
为什么要使用wrapAll（）而不是wrap（）？
大概wrap（）仅适用于jQuery，但是大概JQ可以与JS一起使用，那么为什么在使用查询选择器选择文档，按类名获取元素或其他任何JS选择器来选择元素之后为什么不包装工作？

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

Answer 1

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

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

Wrap会单独围绕每个匹配元素，而WrapAll会一次围绕所有元素。

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

Answer 2

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>');

使用JS将特定div中的所有元素包装起来（JQ作品）

2 个答案: