在循环中将内容从 div1 移动到 div2答案

【问题标题】：Move content from div1 to div2 in a loop在循环中将内容从 div1 移动到 div2
【发布时间】：2016-10-14 11:36:24
【问题描述】：

我搜索了一个解决方案，但找不到它，并且在生成循环时遇到了这种情况，但我没有得到我想要的结果。

情况如下：具有 child-1 和 child-2 的父 div 处于循环中。我需要将内容从 child-2 循环移动到 child-1。

提前感谢您的帮助:)

$('.parent').each(function(){
  $('.link').appendTo('.child-1');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='parent'>
	<p class="child-1">	Move link one here	</p>
	<p class="child-2">		
		<a class="link" href="#ID-1"> link one </a>	
	</p>
</div>


<div class='parent'>
	<p class="child-1">	Move link two here	</p>
	<p class="child-2">		
		<a class="link" href="#ID-2"> link two </a>
	</p>
</div>


<div class='parent'>
	<p class="child-1">	Move link three here	</p>
	<p class="child-2">		
		<a class="link" href="#ID-3"> link three</a>	
	</p>
</div>

【问题讨论】：

标签： jquery foreach append

【解决方案1】：

此代码将所有具有类“link”的元素附加到所有具有类“.child-1”的子元素：

$('.link').appendTo('.child-1');

您应该做的是将元素限制为每个父级的后代，使用 jQuery 的 find() 方法：

$('.parent').each(function() {
  $(this).find('.link').appendTo($(this).find('.child-1'));
});

$('.parent').each(function() {
  $(this).find('.link').appendTo($(this).find('.child-1'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
  <p class="child-1">Move link one here</p>
  <p class="child-2">
    <a class="link" href="#ID-1"> link one </a>	
  </p>
</div>

<div class='parent'>
  <p class="child-1">Move link two here</p>
  <p class="child-2">
    <a class="link" href="#ID-2"> link two </a>
  </p>
</div>

<div class='parent'>
  <p class="child-1">Move link three here</p>
  <p class="child-2">
    <a class="link" href="#ID-3"> link three</a>	
  </p>
</div>

【讨论】：

非常感谢 :)

【解决方案2】：

你需要在你的孩子 2 div 中创建一个循环，试试这个代码：

//loop in child-2 div
$('.child-2').each(function(i, item) {
  //get the parent element and find the child-1, the child-1 append the html of child-2
  $(this).parent().find('.child-1').html($(this).html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class='parent'>
	<p class="child-1">	Move link one here	</p>
	<p class="child-2">		
		<a class="link" href="#ID-1"> link one </a>	
	</p>
</div>


<div class='parent'>
	<p class="child-1">	Move link two here	</p>
	<p class="child-2">		
		<a class="link" href="#ID-2"> link two </a>
	</p>
</div>


<div class='parent'>
	<p class="child-1">	Move link three here	</p>
	<p class="child-2">		
		<a class="link" href="#ID-3"> link three</a>	
	</p>
</div>

【讨论】：