jquery - 如何使用 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 小提琴演示。

参考：

• closest().
• each().
• insertBefore()

Answer 2

我认为这也可能有效：

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