Question

我需要根据输入数字克隆元素。因此，如果我选择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（）方法显示它们？

Answer 1

在每个函数调用中清除#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>

Answer 2

您的问题很容易解决。请在克隆.html()时添加$("#original").clone().html();，因为.html()需要一个字符串，但是$("#original").clone()是jQuery元素，因此它是未定义的，您不能使用运算符{{1} }用于jQuery对象。

+返回jQuery对象的字符串。

这是解决方案

.html()

function letsClone(times){
  var clons = "";
  for(var i=0; i<times; i++){
    clons = clons + $("#original").clone().html();
  }
  $("#clonecontainer").html(clons);
}

Answer 3

简单地，重复添加元素的html并替换父元素的html。

注意：需要进行>0检查，否则会导致无限循环

function letsClone(times)
{
    var html = $("#original").html();
    while(--times > 0)
    {
        html += html;
    }
    $("#clonecontainer").html(html);
}

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

它也可以简化为一行。在HTML字符串上使用String.repeat()。

注意：IE不支持。

function letsClone(times)
{
    $("#clonecontainer").html($("#original").html().repeat(times));
}

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

Answer 4

这是将其添加到同一div中的方法：

function letsClone(times){ 
  $("#clonecontainer").html('');
  for(var i=0; i<times; i++){
   var elmnt = document.getElementsByTagName("DIV")[0];
  var cln = elmnt.cloneNode(true);
  $("#clonecontainer").append(cln);
  }
}

<!DOCTYPE html>
<html>
<body>

<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>




</body>
</html>

如果您需要多个Div

function letsClone(times){ 
  $("#clonecontainer").html('');
  
  for(var i=0; i<times; i++){
   var elmnt = document.getElementsByTagName("DIV")[i];
  var cln = elmnt.cloneNode(true);
 
document.getElementById("clonecontainer").appendChild(cln)
  }
}

<!DOCTYPE html>
<html>
<body>

<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" class="original"><p>I'm gonna be cloned</p></div>

<div id="clonecontainer" style="border:1px solid red">

</div>




</body>
</html>

如何根据输入数字.clone（）元素

4 个答案: