Cum să mutați un element după un alt element folosind JS sau jquery? (Programare, Javascript, Jquery, Html)

utilizator1989195 a intrebat.

Aș dori să mut un DIV element lângă altul, în mod normal este așa:

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

Vreau să schimb poziția elementului div cu clasa .price să fie după elementul .name clasă, pentru a arăta astfel:

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

Comentarii

  • Cum este creat acest html? în ce limbă doriți să vă deplasați? întrebarea dumneavoastră nu este foarte clară. –  > Por ROY Finley.
  • @ROYFinley întrebarea este etichetată cu javascript și jquery –  > Por mylopeda.
  • Întotdeauna este bine să atașezi o vioară: jsfiddle.net/m6djm –  > Por Nabil Kadimi.
3 răspunsuri
techfoobar

Puteți utiliza insertAfter pentru a muta elementul. Docs

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

Aici aveți programul actualizat.

Nabil Kadimi
$('.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));
});

Încearcă-l: http://jsfiddle.net/m6djm/1/

Comentarii

  • aceasta este, tancuri fratele meu ^_^ –  > Por utilizator1989195.
  • @user1989195 Vă rugăm să citiți meta.stackexchange.com/a/98135/208061 și meta.stackexchange.com/a/93970/208061 –  > Por Nabil Kadimi.
Matt Steele

<div>‘s sunt elemente la nivel de bloc, așa că acesta este comportamentul lor natural. Ați putea face să plutească div-urile și apoi să le ștergeți, sau să folosiți display: inline.

Cred că acest link te-ar ajuta să înțelegi un pic mai mult totuși:

CSS block și inline

Comentarii

  • Întrebarea nu este cum să plasați conținutul div-ului pe același rând cu conținutul unui alt div. Este vorba despre mutarea unui div în DOM și plasarea lui după un alt div. –  > Por mylopeda.
  • Ah, am înțeles. Se pare că am citit prea repede „schimbă poziția div-ului”. Se pare că totuși s-a rezolvat. Câștig ceva/pierd ceva. –  > Por Matt Steele.