添加“包装器” div 标签来包装其他 html div 标签？

Question

我正在尝试添加一个“包装器”div 标签来用 jQuery 包装其他两个带有类名“c1”和“c2”的标签。请帮帮我。

这是我尝试过的代码：

$(".c1, .c2").wrap("<div class='wrapper'></div>");

希望这个代码块能帮助你理解我的需求：

<!--  This portion is my current code  -->

<div class="container">
    <div class="c1">c1</div>
    <div class="c2">c2</div>
    <div class="c3">c3</div>
    <div class="c4">c4</div>
</div>

<div class="container">
    <div class="c1">c1</div>
    <div class="c2">c2</div>
    <div class="c3">c3</div>
    <div class="c4">c4</div>
</div>

{<div class="container"> ... </div>}n


<!--  This is my desired output  -->

<div class="container">
    <div class="wrapper">
        <div class="c1">c1</div>
        <div class="c2">c2</div>
    </div>
    <div class="c3">c3</div>
    <div class="c4">c4</div>
</div>

<div class="container">
    <div class="wrapper">
        <div class="c1">c1</div>
        <div class="c2">c2</div>
    </div>
    <div class="c3">c3</div>
    <div class="c4">c4</div>
</div>

{<div class="container"> ... </div>}n

最终目标： 我只想用 jQuery 在“.c1”和“.c2”周围添加一个“包装器”div。任何想法都会很有帮助。

Answer 1

您可以使用.wrapAll() 代替.wrap()：

$(function() {
    $(".c1, .c2").wrapAll("<div class='wrapper'></div>");
});

.wrapper {
    background-color: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="c1">c1</div>
    <div class="c2">c2</div>
    <div class="c3">c3</div>
    <div class="c4">c4</div>
</div>