只将每个元素准备给自己的父元素。

Question

我需要jQuery的帮助。我试图使用prepend将一个元素(author)从左列移到其父列中的右侧。我需要将每个作者都移动到自己的post容器中，但是现在所有的author元素都移动到每个父容器中。你能请你引导我吗。提前谢谢你。

<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);
});

更新小提琴

Answer 2

循环遍历左列中的每个author类，然后使用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">
	<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>

​