Clone HTML DIV con jQuery su select

Question

Sto provando a clonare il campo Età bambino in base al valore selezionato per il numero di bambini per selezionare l'età di ogni bambino /. HTML è:

CAMERA 1

<div class="col-xs-4"> 
     <label>Copii</label> 
     <div class="selector"> 
      <select id='kids-1' name="rooms[0][child]" class="full-width"> 
      <option value="0">0</option> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      > 
      </select> 
     </div> 
    </div> 
    <div class="age-of-children no-display"> 
     <div class="row"> 
      <div class="col-xs-4 child-age-field"> 
      <label>Copil 1</label> 
      <div class="selector validation-field"> 
       <select id='age-1' class="full-width" name="rooms[0][age][]"> 
        <option value="5">5</option> 
        <option value="6">6</option> 
        <option value="7">7</option> 
        <option value="8">8</option> 
        <option value="9">9</option> 
        <option value="10">10</option> 
        <option value="11">11</option> 
       </select> 
      </div> 
      </div> 
     </div> 
    </div> 

CAMERA 2

<div class="col-xs-4"> 
     <label>Copii</label> 
     <div class="selector"> 
      <select id='kids-2' name="rooms[1][child]" class="full-width"> 
      <option value="0">0</option> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      > 
      </select> 
     </div> 
    </div> 
    <div class="age-of-children no-display"> 
     <div class="row"> 
      <div class="col-xs-4 child-age-field"> 
      <label>Copil 1</label> 
      <div class="selector validation-field"> 
       <select id='age-2' class="full-width" name="rooms[1][age][]"> 
        <option value="5">5</option> 
        <option value="6">6</option> 
        <option value="7">7</option> 
        <option value="8">8</option> 
        <option value="9">9</option> 
        <option value="10">10</option> 
        <option value="11">11</option> 
       </select> 
      </div> 
      </div> 
     </div> 
    </div> 

E il codice jQuery che è l'uso è

// handle kid age from room 1 
tjq('select[id=kids-1]').change(function(){ 
    var prev_kids = tjq('.age-of-children .child-age-field').length; 
    tjq('.age-of-children').removeClass('no-display'); 
    var i; 
    if (prev_kids > tjq(this).val()) { 

     var current_kids = tjq(this).val(); 

     if (current_kids == 0) { 
      current_kids = 1; 
      tjq('.age-of-children').addClass('no-display'); 
     } 

     for (i = prev_kids; i > current_kids; --i) { 
      tjq('.age-of-children .child-age-field').eq(i-1).remove(); 
     } 
    } else { 
     for (i = prev_kids + 1; i <= tjq(this).val(); i++) { 
      var clone_age_last = tjq('.age-of-children .child-age-field:last').clone(); 
      var clone_age = clone_age_last.clone(); 
      tjq('.age-of-children .row').append(clone_age); 
      var name = clone_age.find('label').text().replace(/(\d+)/, function(match, p1) 
      { 
       return (parseInt(p1) + 1); 
      }); 
      clone_age.find('label').text(name); 
      clone_age.find('select').val(0); 
      clone_age.find('.custom-select').text(0); 
     } 
    } 
}); 
    // handle kid age from room 2 
tjq('select[id=kids-2]').change(function(){ 
    var prev_kids = tjq('.age-of-children .child-age-field').length; 
    tjq('.age-of-children').removeClass('no-display'); 
    var i; 
    if (prev_kids > tjq(this).val()) { 

     var current_kids = tjq(this).val(); 

     if (current_kids == 0) { 
      current_kids = 1; 
      tjq('.age-of-children').addClass('no-display'); 
     } 

     for (i = prev_kids; i > current_kids; --i) { 
      tjq('.age-of-children .child-age-field').eq(i-1).remove(); 
     } 
    } else { 
     for (i = prev_kids + 1; i <= tjq(this).val(); i++) { 
      var clone_age_last = tjq('.age-of-children .child-age-field:last').clone(); 
      var clone_age = clone_age_last.clone(); 
      tjq('.age-of-children .row').append(clone_age); 
      var name = clone_age.find('label').text().replace(/(\d+)/, function(match, p1) 
      { 
       return (parseInt(p1) + 1); 
      }); 
      clone_age.find('label').text(name); 
      clone_age.find('select').val(0); 
      clone_age.find('.custom-select').text(0); 
     } 
    } 
}); 

Il codice deve clonare il età 1 campo basato sul valore selezionato del selettore di conteggio bambini in modo da poter scegliere l'età per ogni bambino.

io ho creato il JSFiddle

Answer 1

penso che sarà ricostruire alcuni dei codice HTML.

Ad esempio, sono stati aggiunti gli elementi .room-container per facilitare l'identificazione con questo elemento e gli elementi che lo contengono.

Spero che il mio codice risolva il problema.

JSFiddle

HTML:

<div class="room-container"> 
<span> ROOM 1 </span> 
     <div class="col-xs-4"> 
      <label>Copii</label> 
      <div class="selector"> 
       <select id='kids-1' name="rooms[0][child]" class="full-width"> 
       <option value="0">0</option> 
       <option value="1">1</option> 
       <option value="2">2</option> 
       <option value="3">3</option> 
       </select> 
      </div> 
     </div> 
     <div class="age-of-children no-display"> 
      <div class="row"> 
       <div class="col-xs-4 child-age-field"> 
       <label>Copil 1</label> 
       <div class="selector validation-field"> 
        <select id='age-1' class="full-width" name="rooms[0][age][]"> 
         <option value="5">5</option> 
         <option value="6">6</option> 
         <option value="7">7</option> 
         <option value="8">8</option> 
         <option value="9">9</option> 
         <option value="10">10</option> 
         <option value="11">11</option> 
        </select> 
       </div> 
       </div> 
      </div> 
     </div> 
</div> 
<hr> 
<div class="room-container"> 
<span>ROOM 2</span> 

     <div class="col-xs-4"> 
      <label>Copii</label> 
      <div class="selector"> 
       <select id='kids-2' name="rooms[1][child]" class="full-width"> 
       <option value="0">0</option> 
       <option value="1">1</option> 
       <option value="2">2</option> 
       <option value="3">3</option> 
       > 
       </select> 
      </div> 
     </div> 
     <div class="age-of-children no-display"> 
      <div class="row"> 
       <div class="col-xs-4 child-age-field"> 
       <label>Copil 1</label> 
       <div class="selector validation-field"> 
        <select id='age-2' class="full-width" name="rooms[1][age][]"> 
         <option value="5">5</option> 
         <option value="6">6</option> 
         <option value="7">7</option> 
         <option value="8">8</option> 
         <option value="9">9</option> 
         <option value="10">10</option> 
         <option value="11">11</option> 
        </select> 
       </div> 
       </div> 
      </div> 
     </div> 
</div> 

JS:

$(document).on('change', '[id^="kids-"]', function(){ 

    //Getting index of current room 
    var roomIndex = $(this).attr('name').split('rooms[')[1].split('][child]')[0]; 

    //Getting room container 
    var roomContainer = $(this).closest('.room-container'); 

    //Variable with childs number 
    var childsNumber = Number($(this).val()); 

    //First element `.age-of-children` which is used as template for next childs 
    var firstAgeOfChildsElement = $(roomContainer).find('.age-of-children').eq(0); 

    //Number of total exists `.age-of-children` elements 
    var ageOfChildsElementsCount = $(roomContainer).find('.age-of-children').length; 

    //Number of `.age-of-children` elements which are not hidden 
    var ageOfChildsVisibleElementsCount = $(roomContainer).find('.age-of-children').not('.no-display').length; 

    //Adding new `.age-of-children` element if number of elements is lower than selected value BEGIN 
    if(ageOfChildsElementsCount < childsNumber){ 

     for(var i=0;i<childsNumber;i++){ 

      if($(roomContainer).find('.age-of-children').eq(i).length < 1){ 

       //Cloning first `.age-of-children` element 
       var newAgeOfChildsElement = $(firstAgeOfChildsElement).clone(); 

       //Setting new id for cloned `.age-of-children` element, and setting default value (5) 
       $(newAgeOfChildsElement).find('select').attr('id', 'kid-'+i).val('5'); 

       //Setting new label title for clonded `.age-of-children` element 
       $(newAgeOfChildsElement).find('label').text('Copil '+(i+1)); 

       //Appending cloned `.age-of-children` element to `roomContainer` 
       $(roomContainer).append(newAgeOfChildsElement); 
      } 
     } 
    } 


    //Hidding all exists `.age-of-children` elements 
    $(roomContainer).find('.age-of-children').addClass('no-display'); 


    //Unhidding exists `.age-of-children` elements if number of visible elements is lower than selected value (`index` of current element in loop have same or lower index than selected number of childs) 
    $(roomContainer).find('.age-of-children').each(function(){ 

     //Checing if index of current `.age-of-children` inside `roomContainer` element is lower than `childsNumber` 
     if($(roomContainer).find('.age-of-children').index($(this)) < childsNumber){ 

      $(this).removeClass('no-display'); 
     } 
    }); 

}); 

$(document).ready(function(){ 

    //Setting default value and triggering change for each item 
    $('[id^="kids-"]').val(2).trigger('change'); 
});