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>

我想将班级的位置更改为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>

Answer 1

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

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

在这里你有更新的小提琴。

Answer 2

$('.box-related-product-top > div').each(function(){
    $(this).find('.image').appendTo(this);
    $(this).find('.name').appendTo($(this));
    $(this).find('.price').appendTo($(this));
    $(this).find('.cart').appendTo($(this));
});

试试看：http: //jsfiddle.net/m6djm/1/

Answer 3

<div>'s 是块级元素，因此这是它们的自然行为。您可以浮动 div 然后清除它们，或者使用display: inline.

我认为此链接将帮助您了解更多信息：

CSS 块和内联