jQuery appendTo 制作多个副本

Question

我有一个基本功能，可以将一个 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。