Verwenden von for-Schleife zum Anhängen div

In meinem Code habe ich ein HTML-Formular, das ein Benutzer füllt. Sie geben dann einen Wert in das Feld "member" ein und klicken auf den Button, um weitere Kopien von div = 'sector_prop' zu erzeugen. FORM Teil - Anzahl der Sektoren (LTE)Verwenden von for-Schleife zum Anhängen div

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

<button>Generate Sector Properties</button>

Hier div "sector_prop" ist

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

ich die div eine Verwendung für Schleife angehängt werden soll. Dieser Code funktioniert sehr gut für die Werte 1,2,3,4,5. Wenn der Wert der Zahl 6 oder höher ist, bricht der Code ab und hängt mehr als das benötigte div an. Ich versuche herauszufinden, warum das passiert. Irgendwelche Vorschläge ?

$(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>

Quelle

2017-07-07 ssharma

können Sie es auf plunkr setzen oder das Snippet verwenden? –

vielleicht sollte 'i' gleich 0 sein? –

dies wie Sieht, was Sie sprechen?

$(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>

Quelle

2017-07-07 22:38:59 Manatax

Ja, tut es. Können Sie bitte die Logik hinter dem Update erklären? – ssharma

1) Sie verpassen ein schließendes Div-Tag. 2) Wenn Sie außerhalb der Schleife klonen, erstellen Sie nicht jedes Mal ein neues Element. 3) Wenn Sie die Liste anstelle des Elements klonen, werden Sie exponentiell wachsen. Stellen Sie sich folgendes vor: Sie haben dieses Array [a], und jetzt wollen Sie es klonen und an sich selbst anhängen. Du hast am Ende [a, [a]]. Zweites Mal: [a, [a, [a,],]]] usw., aber wenn Sie das erste Element alleine klonen, dann enden Sie mit [a, a, ..., a] – Manatax

Verwenden von for-Schleife zum Anhängen div

Antwort

Verwandte Themen