user1989195 user1989195 - 5 months ago 24
jQuery Question

How to move an element after another element using JS or jquery?

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>


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>

Answer

You can use insertAfter to move the element. Docs

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

Here you have the updated fiddle.