各要素をそれ自身の親の前に置く

Question

jQueryのヘルプが必要です。 prependを使用して、親の中で左の列から右の要素（著者）を移動しようとしています。 私はそれぞれの著者がそれ自身のpostコンテナの中に移動する必要がありますが、今はすべての著者要素がすべての親コンテナに移動します。あなたは、私を導くことができますか？ ありがとうございます。

<div class="post"> 
    <div class="col-left"> 
     <img src="http://placehold.it/80x80"> 
     <div class="author">Jack</div> 
    </div> 
    <div class="col-right"> 
     <div class="title">Article-1</div> 
     <div class="date">09-21-16</div> 
     <div class="intro"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
     </div> 
    </div> 
    <div style="clear: both;"></div> 
</div> 

<div class="post"> 
    <div class="col-left"> 
     <img src="http://placehold.it/80x80"> 
     <div class="author">Eric</div> 
    </div> 
    <div class="col-right"> 
     <div class="title">Article-2</div> 
     <div class="date">08-21-16</div> 
     <div class="intro"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
     </div> 
    </div> 
    <div style="clear: both;"></div> 
</div> 

<div class="post"> 
    <div class="col-left"> 
     <img src="http://placehold.it/80x80"> 
     <div class="author">Kate</div> 
    </div> 
    <div class="col-right"> 
     <div class="title">Article-3</div> 
     <div class="date">07-21-16</div> 
     <div class="intro"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
     </div> 
    </div> 
    <div style="clear: both;"></div> 
</div> 

$(".post .author").prependTo(".col-right"); 

jsFiddle

Answer 1

あなたはすべての.author要素を選択し、すべての.col-right要素にそれらを一緒に追加しているので、あなたが見ている動作です。

代わりに、.author要素をループし、DOMをトラバースして関連するものを見つけ出す必要があります.col-right。左の列から各著者クラスを通じて

$(".post .author").each(function() { 
    var $author = $(this); 
    $author.closest('.post').find('.col-right').prepend($author); 
}); 

Updated fiddle

Answer 2

ループして、フィドルは素晴らしいですが、確認してくださいprependTo

$(".author").each(function (a, b) {  
     $(b).prependTo($(b).closest('.post').find('>.col-right')); 
}); 

$(".author").each(function (a, b) {  
 
      $(b).prependTo($(b).closest('.post').find('>.col-right')); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<style> 
 
.col-left { 
 
    width:20%; 
 
    float:left; 
 
} 
 
.col-right { 
 
    width:80%; 
 
    float:left; 
 
} 
 
.post { 
 
    border:1px solid grey; 
 
    padding: 5px; 
 
    margin-bottom: 5px; 
 
} 
 
.date { 
 
    font-size: 10px; 
 
    color: grey; 
 
} 
 
.author { 
 
    color: red; 
 
} 
 
    </style> 
 
<div class="post"> 
 
\t <div class="col-left"> 
 
\t \t <img src="http://placehold.it/80x80"> 
 
\t \t <div class="author">Jack</div> 
 
\t </div> 
 
\t <div class="col-right"> 
 
\t \t <div class="title">Article-1</div> 
 
\t \t <div class="date">09-21-16</div> 
 
\t \t <div class="intro"> 
 
\t \t \t Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
\t \t </div> 
 
\t </div> 
 
    <div style="clear: both;"></div> 
 
</div> 
 

 
<div class="post"> 
 
\t <div class="col-left"> 
 
\t \t <img src="http://placehold.it/80x80"> 
 
\t \t <div class="author">Eric</div> 
 
\t </div> 
 
\t <div class="col-right"> 
 
\t \t <div class="title">Article-2</div> 
 
\t \t <div class="date">08-21-16</div> 
 
\t \t <div class="intro"> 
 
\t \t \t Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
\t \t </div> 
 
\t </div> 
 
    <div style="clear: both;"></div> 
 
</div> 
 

 
<div class="post"> 
 
\t <div class="col-left"> 
 
\t \t <img src="http://placehold.it/80x80"> 
 
\t \t <div class="author">Kate</div> 
 
\t </div> 
 
\t <div class="col-right"> 
 
\t \t <div class="title">Article-3</div> 
 
\t \t <div class="date">07-21-16</div> 
 
\t \t <div class="intro"> 
 
\t \t \t Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
 
\t \t </div> 
 
\t </div> 
 
    <div style="clear: both;"></div> 
 
</div>