时间戳

首页 > 解决方案 > 如何根据输入数字 .clone() 元素

javascript - 如何根据输入数字 .clone() 元素

问题描述

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

标签： javascriptjqueryhtml

解决方案

清除#clonecontainer每个函数调用中的 html。我也更喜欢oninput而不是onchange。

我相信您只想克隆来自#original.

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在文档中必须是唯一的，请改用类。在这种情况下，克隆使用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>

推荐阅读