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>

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

1 个答案: