0

重複の可能性:
jQuery で異なるクラス名の DIV タグをラップする方法は?

ドキュメント内で次の 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>

...

Div のブロックを jQuery でラップして次の結果を得るにはどうすればよいですか...

<!-- 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>

...
4

1 に答える 1

0

次のようなことができます：

$('#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();
});

まず、クラス コンテナーで必要な div の数を DOM に追加します。次に、各 div .first および .second に対して、dom の最初の$(".first").eq(0)クローンを取得してから、最初の ".container" に追加する必要があります。before remove を使用.end()して、クローンされたものではなく元の div を確実に削除する必要があります。

これを div ごとに行い、.container の数値を変更して「.container」を変更し$(".container").eq(0)ます。

このコードはあなたの例では問題なく動作しますが、「.container」がさらにある場合はループを作成する必要があります。

于 2012-12-14T13:27:07.280 に答える