[英]Using for loop to append div
在我的代码中,我有一个用户填写的HTML表单。 然后,他们在“成员”字段中输入一个值,然后单击按钮以生成div ='sector_prop'的其他副本。 FORM部分是-扇区数(LTE)
<br>
<br>
<input type="text" id="member" name="member" value="">
<br>
<br>
<button>Generate Sector Properties</button>
这里的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>
我想使用for循环附加div。 此代码对于值1,2,3,4,5效果很好。 当number的值等于或大于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); 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>
这看起来像您在说什么吗?
$(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.