[解決済み] JSやjqueryを使って、ある要素を他の要素の後に移動させるにはどうしたらいいですか？

質問

を1つ移動させたいのですが DIV 要素を横に並べると、通常はこのようになります。

<div class="box-content-top">
 <div class="box-related-product-top">
  <div>  

    <div class="price">
      ...   
    </div>              
    <div class="image">
     ...
    </div>
    <div class="name">
     ...
    </div>
    <div class="cart">
     ...
    </div>


   <div>  

    <div class="price">
      ...   
    </div>            
    <div class="image">
     ...
    </div>
    <div class="name">
     ...
    </div>
    <div class="cart">
     ...
    </div>

  </div>
</div>

の位置を変更したい。 div というクラスで .price の後になるように .name クラスで、次のようになります。

<div class="box-content-top">
 <div class="box-related-product-top">
  <div>  

    <div class="image">
     ...
    </div>
    <div class="name">
     ...
    </div>
     <div class="price"> // HERE
      ...   
    </div> 
    <div class="cart">
     ...
    </div>


   <div>  

    <div class="image">
     ...
    </div>
    <div class="name">
     ...
    </div>
    <div class="price"> // HERE
      ...   
    </div> 
    <div class="cart">
     ...
    </div>

  </div>
</div>

解決方法は？

を使用することができます。 insertAfter で要素を移動させることができます。 ドキュメント

$('.price').each(function() {
    $(this).insertAfter($(this).parent().find('.name'));
});

ここでは 更新されたフィドル .