如何使用 jQuery 克隆和追加多个元素?

How do I clone and append multiple elements in place with jQuery?

将 class 中的每个元素复制为同级元素的简单方法是什么?例如,它应该更改此 HTML:

<body>
    <div> 
        <h1> Foos </h1>
        <span class='duplicate-me'> foo </span>
    </div>
    <div>
        <h1> Bars </h1> 
        <span class='duplicate-me'> bar </span>
    </div>
</body>

进入:

<body>
    <div> 
        <h1> Foos </h1>
        <span class='duplicate-me'> foo </span>
        <span class='duplicate-me'> foo </span>
    </div>
    <div>
        <h1> Bars </h1> 
        <span class='duplicate-me'> bar </span>
        <span class='duplicate-me'> bar </span>
    </div>
</body>

谢谢

你去 - appendcloning duplicate-me 元素之后的父元素。

参见下面的演示:

$(function(){
  $('.duplicate-me').each(function(){
    $(this).parent().append($(this).clone());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div>
    <h1> Foos </h1>
    <span class='duplicate-me'> foo </span>
  </div>
  <div>
    <h1> Bars </h1> 
    <span class='duplicate-me'> bar </span>
  </div>
</body>

$('.duplicate-me').after(function() {
  return $(this).clone();
});

使用 jQuery 中的 after 方法并在传递给它的函数中调用克隆方法。

参考文献: http://api.jquery.com/after/

http://api.jquery.com/clone/

示例: https://jsfiddle.net/2y6cqLrq/

您只需要:

1)克隆元素 .duplicate-me class.

2)将这些元素附加到 closest div,即它们的 parent.

请试试这个:

$('.duplicate-me').each(function(){
    var clone= $(this).clone();
    $(this).closest('div').append(clone);
});

参考文献:

$('.duplicate-me').each(function(){
     var clone= $(this).clone();
     $(this).closest('div').append(clone);
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div>
    <h1> Foos </h1>
    <span class='duplicate-me'> foo </span>
  </div>
  <div>
    <h1> Bars </h1> 
    <span class='duplicate-me'> bar </span>
  </div>
</body>

在它旁边使用insertAfter to insert the duplicate element created using clone

$(function(){
  $('.duplicate-me').each(function(){
    $(this).clone().insertAfter($(this))
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div>
    <h1> Foos </h1>
    <span class='duplicate-me'> foo </span>
  </div>
  <div>
    <h1> Bars </h1> 
    <span class='duplicate-me'> bar </span>
  </div>
</body>