使用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

回答

相關問題