jquery - 如何递归移动相同类的DOM元素（jquery）

Question

如何递归移动相同类的 DOM 元素？例如，我在 DOM 中有这段代码

<div class="container">
   <div class="mask">
        Content 1
    </div>
   <div class="thumbnail">
      some content here...
    </div>
</div>

<div class="container">
   <div class="mask">
        Content 2
    </div>
   <div class="thumbnail">
      some content here...
    </div>
</div>

<div class="container">
   <div class="mask">
        Content 3
    </div>
   <div class="thumbnail">
      some content here...
    </div>
</div>

我想将掩码类的 div 移动到缩略图类的 div 中，以便代码变成这样：

<div class="container">
   <div class="thumbnail">
     <div class="mask">
          Content 1
      </div>
      some content here...
    </div>
</div>

<div class="container">
   <div class="thumbnail">
     <div class="mask">
         Content 2
      </div>
      some content here...
    </div>
</div>

<div class="container">
   <div class="thumbnail">
     <div class="mask">
          Content 3
      </div>
      some content here...
    </div>
</div>

我正在尝试用 jquery 做到这一点：

$('.mask').prependTo('.thumbnail');

但没有成功。我在所有缩略图中复制了“内容 1”

有人请帮忙。

Answer 1

它是如此简单。尝试这个：

$(".mask").siblings(".thumbnail").prepend($(".mask"));

即使 .mask 和 .thumbnail 之间的元素很少，也可以工作！

更新：

以防万一，您想为所有元素执行此操作：

$(".mask").each(function() {
  $(this).siblings(".thumbnail").prepend(this);
});

Answer 2

这会将所有.masks 移动到所有.thumbnails 中。相反，用于.each单独处理每个元素：

$(".mask").each() {
  $(this).next(".thumbnail").prepend(this);
});