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

仅将每个元素添加到其自己的父元素中

2 个答案: