Question

如何使用jQuery包装元素。我有它与不同的div工作，但只包装到div分开！

我有：

<section>
    <div class='parent'>

        <div class='child'></div>
        <div class='child'></div>
        <div class='child'></div>

    </div> 


    <div class='parent'>

        <div class='child'></div>
        <div class='child'></div>
        <div class='child'></div>

    </div> 

</section>

我想创建另一个父节点但是如果我使用wrapAll，jQuery会将两个div元素中的所有元素包装在我想要的单独div元素中。

我需要的结果：

<section>
    <div class='parent'>
        <div class='newParent'>
            <div class='child'></div>
            <div class='child'></div>
            <div class='child'></div>
        </div>
    </div> 


    <div class='parent'>
        <div class='newParent'>
            <div class='child'></div>
            <div class='child'></div>
            <div class='child'></div>
        </div>
    </div> 

</section>

Answer 1

您可以包装原始父节点的所有内部元素，而不是尝试包装子元素组：

$('.parent').wrapInner('<div class="newParent">');

Demo

另请参阅：.wrapInner()

Answer 2

你不能直接用一个魔术jQuery函数来做这个，但是你可以接近：

$(".parent").each(function() {
  $(this).children(".child").wrapAll($("<div/>", { "class": "newParent" }));
});

找到每个.parent元素，然后使用.wrapAll()来封装里面的子.child元素。

.wrap()函数的不同之处在于它分别包装每个匹配的元素。

编辑 - 或者像聪明人一样使用.wrapInner()。

如何在不同的div中同时用jquery包装元素

2 个答案: