如何在使用JS或jQuery的另一个元素之后移动元素？ [英] How to move an element after another element using JS or jquery?

问题描述

我想在另一个旁边移动一个 DIV 元素，通常是这样的：

I would like to move one DIV element beside another, it is normally like this:

<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 class'price'在'name'类之后，看起来像这样：



I want to change the position of the div with the class 'price' to be after the 'name' class, to look like this:

<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 移动元素。 Google文档

You can use insertAfter to move the element. Docs

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

这里有更新了小提琴。

这篇关于如何在使用JS或jQuery的另一个元素之后移动元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！