我需要根据输入的数字克隆元素。因此,如果我选择 1,我将拥有一个克隆元素,如果我选择 2,我将拥有两个克隆元素。
我已经尝试使用 $("elementtoclone").clone().appendTo("clonecontainer")
并且它有效,但这只是第一次,因为当我选择另一个数字时,它只需附加另一个克隆。例如,如果我选择 1,我会得到那个,但如果我选择 2,我会得到三个,但我只需要两个。
所以我一直认为这样做的逻辑方法是使用 .html() 方法而不是 appendTo()。
所以我需要这样的东西:
function letsClone(times){
var clons;
for(var i=0; i<times; i++){
clons = clons + $("#original").clone();
}
$("#clonecontainer").html(clons);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" onchange="letsClone(this.value)">
<div id="original"><p>I'm gonna be cloned</p></div>
<div id="clonecontainer" style="border:1px solid red">
</div>
但这显然行不通,因为那是我添加字符串的方式,而不是 DOM 元素。
那么有没有一种方法可以将克隆的元素添加到变量中,然后使用 .html() 方法来显示它们?
最佳答案
在每个函数调用中清除#clonecontainer
的html。我也更喜欢 oninput 而不是 onchange。
我相信您只想从 #original
克隆 p 元素。
function letsClone(times){
$("#clonecontainer").html('');
for(var i=0; i<times; i++){
var clons = $("#original > p").clone();
$("#clonecontainer").append(clons);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" oninput="letsClone(this.value)">
<div id="original"><p>I'm gonna be cloned</p></div>
<div id="clonecontainer" style="border:1px solid red">
</div>
如果你真的想克隆整个#original
请注意: 属性 Element.id
在文档中必须是唯一的,请改用 class。在那种情况下克隆使用类的 first()
。
您可以尝试以下方式:
function letsClone(times){
$("#clonecontainer").html('');
for(var i=0; i<times; i++){
var clons = $(".original").first().clone();
$("#clonecontainer").append(clons);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" oninput="letsClone(this.value)">
<div class="original"><p>I'm gonna be cloned</p></div>
<div id="clonecontainer" style="border:1px solid red">
</div>
关于javascript - 如何根据输入数字.clone() 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53844512/