繁体   English   中英

使用for循环附加div

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM