Question

我有一个包含多行的3列div。什么是从第一个div中提取内容并将其附加/添加到第3个div的最动态方式 - 确保所有后续div都跟随。

这是我的示例代码：

＆＃13;

	<div class="content">
	  <div class="item">
	  	<div class="col1">
	  		<div class="img1">
	  			<img src="img_in_first_col">
	  		</div>
	  	</div>
	  	<div class="col2"></div>
	  	<div class="col3">
	  		<div class="img2">
	  			<img src="img_in_third_col">
	  		</div>
	  	</div>
	  </div>
	  <div class="item">
	  	<div class="col1">
	  		<div class="img1">
	  			<img src="img_in_first_col">
	  		</div>
	  	</div>
	  	<div class="col2"></div>
	  	<div class="col3">
	  		<div class="img2">
	  			<img src="img_in_third_col">
	  		</div>
	  	</div>
	  </div>
	  <div class="item">
	  	<div class="col1">
	  		<div class="img1">
	  			<img src="img_in_first_col">
	  		</div>
	  	</div>
	  	<div class="col2"></div>
	  	<div class="col3">
	  		<div class="img2">
	  			<img src="img_in_third_col">
	  		</div>
	  	</div>
	  </div>
	</div>

＆＃13;

我尝试过使用以下内容：

＆＃13;

$('.item .col1 .img1').each(function(){
	$(this).prependTo('.item .col3 .img2')
})

＆＃13;

＆＃13; 但我得到的是所有图像被添加到所有行。请帮忙！提前谢谢

Answer 1

应该这么简单：

$(".col1").each(function (index, element) {
  $(this).closest(".col3").prepend($(this).contents());
});

Answer 2

您可以使用它在第3列之后插入第1列：

$('.col1').each(function(){
  $(this).insertAfter($(this).siblings('.col3'));
});

......或在第3栏之前：

$('.col1').each(function(){
  $(this).insertBefore($(this).siblings('.col3'));
});

使用过的jQuery函数：

使用JS / jQuery动态地将内容从一个div添加到另一个div

2 个答案: