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>
All you have to do is select the element(s) you want to move, then call an “adding” method such as append() , appendTo() or prepend() to add the selected elements to another parent element. jQuery automatically realises that the element(s) to add already exist in the page, and it moves the element(s) to the new parent.
First, select the ul element by its id ( menu ) using the getElementById() method. Second, create a new list item using the createElement() method. Third, use the insertAfter () method to insert a list item element after the last list item element.
Answer: Use the jQuery . appendTo() Method You can use the jQuery . appendTo() method to move an element into another element.
You can use insertAfter
to move the element. Docs
$('.price').each(function() {
$(this).insertAfter($(this).parent().find('.name'));
});
Here you have the updated fiddle.
$('.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));
});
Try it: http://jsfiddle.net/m6djm/1/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With