Как перемещать элемент после другого элемента с помощью JS или jquery?

Я хотел бы переместить один элемент 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 с классом "цена", который будет после класса "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>

Ответ 1

Вы можете использовать insertAfter для перемещения элемента. Документы

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

Здесь вы найдете обновленную скрипту.

Ответ 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/

Ответ 3

<div> являются блочными элементами, поэтому их естественное поведение. Вы можете плавать div, а затем очищать их или использовать display: inline.

Я думаю, что эта ссылка поможет вам понять немного больше:

блок CSS и встроенный