Perché il clone di JQUERY funziona e aggiungendo un ID e confermare il valore dell'email?

Question

Sto riscontrando 2 problemi complicati di UX JQuery su cui sto lavorando attualmente. Sto clonando un 2 variabili di modulo usando JQuery. Come faccio a indicizzare, id loro così posso etichettarli con questo id. Ad esempio, se prendo 3 dalla casella di selezione, dovrei ottenere 3 linee di modulo e sul lato sinistro di ogni riga dovrebbe iniziare con un numero che inizia con 1. forma, 2. forma, 3 forma.

Il secondo problema che desidero convalidare il partecipante [] contro la confermaattraente []. Come farei questo all'interno di un codice HTML clonato.

Ecco il mio JSFiddle http://jsfiddle.net/tGprH/5/

Ecco il mio codice 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> 

Ecco il mio 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

è possibile stampare il richiesto nel vostro ciclo for come ..

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

provare questo

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

Circa il primo problema: 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(); 

E a proposito del confronto: 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() + ']') 
    } 
});