为每组div分配一个跨度到另一个div

我有很多div的集合，我试图将特定范围的内容复制到另一个范围内，并对所有div重复相同的操作。为每组div分配一个跨度到另一个div

这里是我的html代码：

<div class="item"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <span class="ContentGoesHere"></span> 
     </div> 
    </div> 
    <div class="DivWithContent"> 
     <span class="ContentComesFromHere">This is my content 1</span> 
    </div> 
</div> 
<div class="item"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <span class="ContentGoesHere"></span> 
     </div> 
    </div> 
    <div class="DivWithContent"> 
     <span class="ContentComesFromHere">This is my content 2</span> 
    </div> 
</div> 
<div class="item"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <span class="ContentGoesHere"></span> 
     </div> 
    </div> 
    <div class="DivWithContent"> 
     <span class="ContentComesFromHere">This is my content 3</span> 
    </div> 
</div>

我的jQuery代码是：

$("div.item").each(function(i) { 

    $(this).find('span.ContentComesFromHere').clone(true, true).contents().appendTo('span.ContentGoesHere'); 

});

它几乎工作，现在我在我的span.ContentGoesHere得到的是：这是我的内容1这是我的内容2这是我的内容3 - 所有内容都是相同的，但内容需要针对每个div.item。

谢谢你的帮助。

来源

2017-10-04 user8408548

类名称应该是唯一的以执行唯一克隆。尝试在类名中包含索引'i'。 – Vamsi

尝试以下

$("div.item").each(function(i) { 
    $(this).find('span.ContentComesFromHere') 
    .clone(true,true).contents() 
    .appendTo($(this).find('span.ContentGoesHere')); 
});

代码，看看演示中的jsfiddle

Click here to see Demo In JsFiddle

来源

2017-10-04 07:02:04

谢谢，它效果很好！ – user8408548

试试下面的代码。

$("div.item").each(function(i) { 
    var content = $(this).find('span.ContentComesFromHere').html(); 
    $(this).find('span.ContentGoesHere').html(content); 
});

来源

2017-10-04 06:15:22

如果您键入的功能是这样的：

$("div.item").each(function(i) { 
    let content = $(this).find('span.ContentComesFromHere'); 
    let contentTarget = $(this).find('span.ContentGoesHere'); 
    content.clone().appendTo(contentTarget); 
});

那么最终的结果将是这样的：

This is my content 1 
This is my content 1 
This is my content 2 
This is my content 2 
This is my content 3 
This is my content 3

见片断的工作代码。

$("div.item").each(function(i) { 
 
    let content = $(this).find('span.ContentComesFromHere'); 
 
    let contentTarget = $(this).find('span.ContentGoesHere'); 
 
    content.clone().appendTo(contentTarget); 
 
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
 
<div class="item"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
      <span class="ContentGoesHere"></span> 
 
     </div> 
 
    </div> 
 
    <div class="DivWithContent"> 
 
     <span class="ContentComesFromHere">This is my content 1</span> 
 
    </div> 
 
</div> 
 
<div class="item"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
      <span class="ContentGoesHere"></span> 
 
     </div> 
 
    </div> 
 
    <div class="DivWithContent"> 
 
     <span class="ContentComesFromHere">This is my content 2</span> 
 
    </div> 
 
</div> 
 
<div class="item"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
      <span class="ContentGoesHere"></span> 
 
     </div> 
 
    </div> 
 
    <div class="DivWithContent"> 
 
     <span class="ContentComesFromHere">This is my content 3</span> 
 
    </div> 
 
</div>

来源

2017-10-04 06:21:13 samAlvin

See it working

你的方式

 $("div.item").each(function(i) {    
     var targetElement = $(this).find('span.ContentGoesHere'); 
     var sourceHtml = $(this).find('span.ContentComesFromHere').clone().contents() 
      sourceHtml.appendTo(targetElement); 
     });

简单的办法

 $("div.item").each(function(i) { 
     var contents = $(this).find('span.ContentComesFromHere').html();  
     $(this).find('span.ContentGoesHere').html(contents); 
     });

在你的情况，你需要找到源和目标由$两者（本）.find（）

来源

2017-10-04 06:23:00 Sami

只需替换为.appendTo（$（this）.find（'span.ContentGoesHere'））;进入你的JS代码，我希望它会工作。

来源

2017-10-04 07:09:37

为每组div分配一个跨度到另一个div

回答

相关问题