为每个div组将一个跨度克隆为另一个跨度

Question

我有很多套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');

});

现在我几乎可以正常使用了。ContentGoes这里是：这是我的内容1这是我的内容2这是我的内容3-所有内容都是相同的，但该内容需要特定于每个div.item。

谢谢您的帮助。

Answer 1

尝试下面的代码。

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

Answer 2

如果您按以下方式键入函数：

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

Answer 3

看到它正常工作

你的方式

       $("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);
      });

在您的情况下，您需要通过$（this）.find（）找到源和目标

Answer 4

试试下面的代码

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

观看jsFiddle中的演示

单击此处查看JsFiddle中的演示

Answer 5

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