如何使用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> 

而且我試着去選擇所有元素圖像配各。產品元素之前移動它們。

當我使用以下命令時，它會將所有圖像移動到第一個.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)); 
});