jQuery appendTo制作多个副本

Question

我有一个将一个div移动到另一个div的基本函数，当我有多个具有相同类名的div时，它会重复div。

在我的小提琴/例子中，它需要所有四个橙色方块的副本并将它们放入所有红色方块中

我想要的是每个红色方块下方的橙色方块在红色方块内移动，所以每个红色方块内部只有一个橙色方块，下方有一个橙色方块。

FIDDLE

$('.button').click(function () {
    $('.orange').appendTo('.red');
}); 

由于

Answer 1

那是因为$('.orange')获得了橙色类的所有div。 （有四个。）你想要做的是循环容器，然后在那里得到div.orange。

$('.button').click(function () {
    $('.container').each(function (idx, elm) {
      var $container = $(elm);
      var $red = $container.children('.red');
      var $orange = $container.children('.orange');
      $orange.appendTo($red);
    });
}); 

这是fiddle。