Dlaczego JQUERY klonuje funkcje i dołącza do niego id i potwierdza wartość wiadomości e-mail?

Question

Mam 2 trudne problemy z UX JQuery, nad którymi obecnie pracuję. Klonuję 2 zmienne formularza przy użyciu JQuery. Jak indeksować, oznaczać je, aby móc je oznaczyć za pomocą tego identyfikatora. Na przykład, jeśli wybiorę 3 z pola wyboru, powinienem otrzymać 3 wiersze formularza, a po lewej stronie każdej linii powinna zaczynać się liczba rozpoczynająca się od 1. formularza, 2. formularza, 3 formularza.

Drugi problem, jaki mam, chcę zweryfikować obsługującego [] przed potwierdzeniem []. Jak to zrobić w sklonowanym kodzie HTML.

Oto moja JSFiddle http://jsfiddle.net/tGprH/5/

Oto mój kod HTML:

<select name="select" id="select"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
</select> 
<br/> 
<p>Email address, Confirm Email Address</p> 
#1 <input type="text" name="attendant[]"/> 
<input type="text" name="confirmattendant[]"/> 
<br/> 

<div id="container"> 

</div> 

Oto moja JQuery

$("select").change(function() { 

    var select = parseInt($('#select').val() , 10); 
    var $clone = '<input type="text" name="attendant[]" /><input type="text" name="confirmattendant[]" /><br/>'; 
    console.log($clone); 
    var html = ''; 
    for(var i = 1;i< select ; i++){ 
     html += $clone; 
    } 
    $('#container').empty().html(html); 
}).change(); 

Answer 1

można wydrukować wymagany w pętli for jak ..

html += '#'+(i + 1)+ ' '+$clone; 

spróbować tej

$("select").change(function() { 

    var select = parseInt($('#select').val() , 10); 
    var $clone = '<input type="text" name="attendant[]" /><input type="text" name="confirmattendant[]" /><br/>'; 
    console.log($clone); 
    var html = ''; 
    for(var i = 1;i< select ; i++){ 
     html += '#'+(i + 1)+ ' '+$clone; 
    } 
    $('#container').empty().html(html); 
}) 

fiddle here

Answer 2

O pierwszego problemu: http://jsfiddle.net/tGprH/7/

$("select").change(function() { 

    var select = parseInt($('#select').val() , 10); 
    var $clone = '<input type="text" name="attendant[]" /><input type="text" name="confirmattendant[]" /><br/>'; 
    console.log($clone); 
    var html = ''; 
    for(var i = 1;i< select ; i++){ 
     if(i >= 1) 
      html += '#' + (i+1) + ' ' + $clone; 
     else 
      html += $clone; 
    } 
    $('#container').empty().html(html); 
}).change(); 

I o porównania: http://jsfiddle.net/tGprH/8/

<button id="compare">compare</button> 

$('#compare').click(function(){ 
    var $attendantArray = $('input[name="attendant[]"]'); 
    var $confirmattendantArray = $('input[name="confirmattendant[]"]'); 
    for(var i = 0;i< $attendantArray.length ; i++) 
    { 
     alert((i+1) + ' attendant [' + $($attendantArray[i]).val() + '/' + $($confirmattendantArray[i]).val() + ']') 
    } 
});