CODEWITHSUNDEEP
javascriptjqueryhtml
user1989195
user1989195

Reputation: 457

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>

Upvotes: 39

Views: 78952

Answers (3)

techfoobar
techfoobar

Reputation: 66663

You can use insertAfter to move the element. Docs

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

Here you have the updated fiddle.

Upvotes: 71

Nabil Kadimi
Nabil Kadimi

Reputation: 10394

$('.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/

Upvotes: 4

Matt Steele
Matt Steele

Reputation: 655

<div>'s are block-level elements so that's their natural behavior. You could float the div's and then clear them, or use display: inline.

I think this link would help you understand a bit more though:

CSS block and inline

Upvotes: 0

Related Questions