javascript - 如何使用 JS 或 jquery 将一个元素移动到另一个元素之后？

Question

我想将一个 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>

我想将类 .price 的 div 的位置更改为在 .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>

Answer 1

您可以使用insertAfter 来移动元素。 Docs

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

这里有 updated fiddle .