logo标签列表

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

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

into:

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

谢谢

4个回答
3
2

这里是操作步骤 - 在克隆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>

1
虽然这对于示例HTML有效，但它不会将克隆体直接放置在原始元素的旁边作为兄弟节点。 - Zachary Nagler
它在这里工作！好的，那么真实情况是什么 - 我指的是真正的HTML？ - kukkuz
2
这个例子不够全面。我试图通过说“in place”和“duplicate”来暗示“next to”，但也许我可以更清楚地表达。 - Zachary Nagler
2
使用clone创建的重复元素，可以使用insertAfter将其插入在原元素旁边。请注意保留HTML标签。 

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

顺便说一句，在 $(this).clone().insertAfter($(this)) 中不需要第二个 $()，只用 $(this).clone().insertAfter(this) 就可以了。 - T.J. Crowder
0

你所需要的是：

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

2）将这些元素附加到它们的 parent，也就是最近的 div 中。

请尝试以下代码：

$('.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>

@kukkuz，是的，你说得对，我不知道为什么会收到负评？:( - Mihai Alexandru-Ionut
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接