Question

可能重复：
How to wrap DIV tags with different class names in jQuery?

我在文档中重复了以下HTML块

<!-- first block -->
<div class="first">
   My first div
</div>
<div class="second">
   My second div
</div>

<!-- second block -->
<div class="first">
   My first div
</div>
<div class="second">
   My second div
</div>

...

如何用jQuery包装Divs块以获得以下结果......

<!-- first block -->
<div class="container">
   <div class="first">
      My first div
   </div>    
   <div class="second">
      My second div
   </div>
</div>

<!-- second block -->
<div class="container">
   <div class="first">
      My first div
   </div>    
   <div class="second">
      My second div
   </div>
</div>

...

Answer 1

您可以这样做：

$('#btnTest').on('click', function() {
    $("body").append('<div class="container"></div>');
    $("body").append('<div class="container"></div>');

    $(".first").eq(0)
        .clone()
            .appendTo($(".container").eq(0))
            .end()
        .remove();

    $(".second").eq(0)
        .clone()
            .appendTo($(".container").eq(0))
            .end()
        .remove();

    $(".first").eq(0)
        .clone()
            .appendTo($(".container").eq(1))
            .end()
        .remove();

    $(".second").eq(0)
        .clone()
            .appendTo($(".container").eq(1))
            .end()
        .remove();
});

首先，使用类容器向DOM添加所需的div数。然后对于每个div .first和.second你必须在dom $(".first").eq(0)克隆它的第一个，然后将它附加到第一个“.container”。您必须在删除之前使用.end()以确保删除原始div而不是克隆的div。

您为每个div执行此操作，并通过更改$(".container").eq(0)中的数字来更改“.container”。

此代码适用于您的示例，但如果您有更多“.container”，则应该对其进行循环。

如何在jQuery中包装具有不同类名的多个div块？

1 个答案: