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

时间:2017-10-04 06:01:19

标签: javascript jquery html

我有很多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。

感谢您的帮助。

5 个答案:

答案 0 :(得分:0)

尝试下面的代码。

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

答案 1 :(得分:0)

如果您输入这样的功能:

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

答案 2 :(得分:0)

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);
      });

在您的情况下,您需要通过$(this).find()

找到源和目标

答案 3 :(得分:0)

尝试以下代码

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

答案 4 :(得分:0)

只需将 .appendTo($(this).find('span.ContentGoesHere')); 替换为 JS 代码,我希望它能正常运行。