34

ある要素を別の要素の横に移動したいのDIVですが、通常は次のようになります。

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

div次のように、クラスの位置をクラス.priceの後に変更したいと思い.nameます。

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

3 に答える 3

63

insertAfter要素を移動するために使用できます。ドキュメント

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

ここに更新されたフィドルがあります。

于 2013-01-27T15:59:22.553 に答える
4 
$('.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));
});

試してみてください：http：//jsfiddle.net/m6djm/1/

于 2013-01-27T16:16:31.760 に答える
0

<div>はブロックレベルの要素であるため、自然な動作です。divをフロートさせてからクリアするか、を使用できますdisplay: inline。

このリンクは、もう少し理解するのに役立つと思います。

CSSブロックとインライン

于 2013-01-27T16:02:34.350 に答える