使用for循环来追加div

在我的代码中，我有一个用户填充的HTML表单。然后，他们在“成员”字段中输入一个值，然后单击该按钮以生成div ='sector_prop'的其他副本。组成部分是 - 扇区数（LTE）使用for循环来追加div

<br>                 
<br> 
<input type="text" id="member" name="member" value=""> 
<br> 
<br> 

<button>Generate Sector Properties</button>

这里格 “sector_prop” 是

<div class="sector_prop"> 
<fieldset> 
Primary LTE Carrier (Select lowest frequency on the site 850 for Band 5, AWS 
for Band 4 and PCS for Band 2)<br> 
<br> 
<select name="lte_freq1"> 
<option value="6">850</option> 
<option value="2">AWS</option> 
<option value="4">PCS</option> 
</select> 
<br> 
</fieldset>

我要追加使用for循环的股利。该代码对于值1,2,3,4,5非常适用。当数值为6或以上时，代码会中断并追加超过所需的div。我试图找出为什么会发生这种情况。有什么建议么？

$(document).ready(function(){ 
$("button").click(function(){ 
var number = document.getElementById("member").value; 
var repeat = $('.sector_prop'); 
var cloned = repeat.clone(true); 
console.log(number); 
for (i=1;i<number;i++){ 
    cloned.appendTo('.sector_prop'); 
    console.log(i); 
console.log(cloned); 
} 


}); 
});

$(document).ready(function(){ 
 
    $("button").click(function(){ 
 
    var number = document.getElementById("member").value; 
 
    var repeat = $('.sector_prop'); 
 
    var cloned = repeat.clone(true); 
 
console.log(number); 
 
\t for (i=1;i<number;i++){ 
 
     cloned.appendTo('.sector_prop'); 
 
     \t console.log(i); 
 
\t console.log(cloned); 
 
\t } 
 
\t 
 

 
    }); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
</head> 
 
<body> 
 

 
<form action="/form" method="post"> 
 

 
<fieldset> 
 
<legend><b> Transport Information</b></legend> 
 
<br> 
 
<br> 
 
OAM IP:<br> 
 
<input type="text" name="oam_ip" pattern="^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$" required> 
 
<br> 
 
<br> 
 

 
<fieldset> 
 
<fieldset> 
 
<legend><b> RF Parameters</b></legend> 
 
<br> 
 
Number of Sectors (LTE)<br> 
 
<br> 
 
<input type="text" id="member" name="member" value=""> 
 
<br> 
 
<br> 
 

 
<button>Generate Sector Properties</button> 
 

 
<br> 
 
<br> 
 
<fieldset> 
 

 
<div class="sector_prop"> 
 
<fieldset> 
 
Primary LTE Carrier (Select lowest frequency on the site 850 for Band 5, AWS for Band 4 and PCS for Band 2)<br> 
 
<br> 
 
<select name="lte_freq1"> 
 
    <option value="6">850</option> 
 
    <option value="2">AWS</option> 
 
    <option value="4">PCS</option> 
 
</select> 
 
<br> 
 

 
<br> 
 

 

 
</fieldset> 
 
</div> 
 

 
<input type="submit"> 
 
</form> 
 
<br> 
 
<br> 
 
</body>

来源

2017-07-07 ssharma

，你可以把它放在plunkr或使用该代码段？ –

也许'我'应该等于0？ –

这看起来像你说的是什么？

$(document).ready(function(){ 
 
$("button").click(function(){ 
 
var number = document.getElementById("member").value; 
 
var repeat = $('fieldset'); 
 
var cloned; 
 
//console.log(number); 
 
for (i=1;i<number;i++){ 
 
    cloned = repeat.clone(true); 
 
    cloned.appendTo('.sector_prop'); 
 
    //console.log(i); 
 
    //console.log(cloned); 
 
} 
 

 

 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<br>                 
 
<br> 
 
<input type="text" id="member" name="member" value=""> 
 
<br> 
 
<br> 
 

 
<button>Generate Sector Properties</button> 
 
Here div "sector_prop" is 
 

 
<div class="sector_prop"> 
 
<fieldset> 
 
Primary LTE Carrier (Select lowest frequency on the site 850 for Band 5, AWS 
 
for Band 4 and PCS for Band 2)<br> 
 
<br> 
 
<select name="lte_freq1"> 
 
<option value="6">850</option> 
 
<option value="2">AWS</option> 
 
<option value="4">PCS</option> 
 
</select> 
 
<br> 
 
</fieldset> 
 
</div>

来源

2017-07-07 22:38:59 Manatax

是的，它的确如此。你能解释一下这个问题的逻辑吗？ – ssharma

1）您错过了一个关闭的div标签。 2）如果你在循环外克隆，那么你不会每次都创建一个新元素。 3）如果你克隆列表而不是元素，那么你将成倍增长。想象一下：你有这个数组[a]，现在你想克隆它并将它附加到它自己。你最终会得到[a，[a]]。第二次：[a，[a，[a，[a]]]]等等，但是如果你单独克隆第一个元素，那么你最终会得到[a，a，...，a] – Manatax

使用for循环来追加div

回答

相关问题