如何使用 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>
谢谢
你去 - append
到 cloning
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 方法并在传递给它的函数中调用克隆方法。
您只需要:
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>
将 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>
谢谢
你去 - append
到 cloning
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 方法并在传递给它的函数中调用克隆方法。
您只需要:
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>