使用for循环附加div
[英]Using for loop to append div
问题描述
In my code I have a HTML form that a user fills. 
在我的代码中，我有一个用户填写的HTML表单。 They then enter a value in the field "member" and click on the button to generate additional copies of div = 'sector_prop'. 然后，他们在“成员”字段中输入一个值，然后单击按钮以生成div ='sector_prop'的其他副本。 FORM part is - Number of Sectors (LTE) FORM部分是-扇区数（LTE）
<br>
<br>
<input type="text" id="member" name="member" value="">
<br>
<br>
<button>Generate Sector Properties</button>
Here div "sector_prop" is 这里的div“ 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>
I want to append the div using a for loop. 我想使用for循环附加div。 This code works perfectly well for values 1,2,3,4,5. 此代码对于值1,2,3,4,5效果很好。 When value of number is 6 or above the code breaks and appends more than the needed div. 当number的值等于或大于6时，代码将中断并追加超出所需的div的值。 I am trying to find out why this happens. 我试图找出原因。 Any suggestions ? 有什么建议么 ？
$(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); for (i=1;i<number;i++){ cloned.appendTo('.sector_prop'); console.log(i); console.log(cloned); } }); });
<!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>
1 个解决方案
解决方案1
0 已采纳 2017-07-07 22:38:59
Does this look like what you are talking about? 这看起来像您在说什么吗？
$(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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.