web-dev-qa-db-fra.com

Comment déplacer un élément après un autre en utilisant JS ou jQuery?

J'aimerais déplacer un élément DIV à côté d'un autre, il se présente normalement ainsi:

<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>

Je veux changer la position de la div avec la classe .price pour être après la classe .name, pour ressembler à ceci:

<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>
javascriptjqueryhtml
13
user1989195

Vous pouvez utiliser insertAfter pour déplacer l'élément. Docs

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

Ici vous avez le mis à jour le violon .

36
techfoobar
$('.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));
});

Essayez-le: http://jsfiddle.net/m6djm/1/

2
Nabil Kadimi

Les <div> sont des éléments de niveau bloc, c'est donc leur comportement naturel. Vous pouvez faire flotter les div puis les effacer ou utiliser display: inline.

Je pense que ce lien vous aiderait à comprendre un peu plus si:

Bloc CSS et inline

1
Matt Steele