Question

将类中的每个元素复制为兄弟的简单方法是什么？例如，它应该更改此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>

由于

Answer 1

您可以在append cloning元素之后转到duplicate-me父元素。

见下面的演示：

＆＃13;

$(function(){
  $('.duplicate-me').each(function(){
    $(this).parent().append($(this).clone());
  });
});

＆＃13;

<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>

＆＃13;

Answer 2

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

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

<强>参考文献： http://api.jquery.com/after/

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

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

Answer 3

使用insertAfter插入在其旁边使用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>

Answer 4

您只需要：

1）克隆.duplicate-me类的元素。

2）将这些元素附加到closest div，即parent。

请试试这个：

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

参考文献：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

4 个答案: