如何使用jQuery移动多个DOM元素？

Question

我有以下代码：

<div class="product">
    <div class="description"></div>
    <div class="image"></div>
</div>

<div class="product">
    <div class="description"></div>
    <div class="image"></div>
</div>

<div class="product">
    <div class="description"></div>
    <div class="image"></div>
</div>

我试图选择所有.image元素并在每个.product元素之前移动它们。

当我使用以下命令时，它会获取所有图像并在第一个.product之前移动它们。我卡住了，我尝试了一个foreach - 这似乎没有用。

                             

$('.product').before($('.image'));

有什么想法吗？

Answer 1

我建议：

$('.image').each(
    function(){
        $(this).insertBefore($(this).closest('.product'));
    });

JS Fiddle demo

参考文献：

• closest()。
• each()。
• insertBefore()

Answer 2

我认为这也可能有用：

$('.product').each(function (index) {
    $(this).before($('.image').eq(index));
});