Kopieren Inhalt des Feldes für alle dynamisch generierten Felder darunter vom Typ

Question

So habe ich eine Reihe von dynamisch generierten Eingaben mit dem folgenden Code: -

$(document).ready(function() { 
    var max_fields  = 16; //maximum input boxes allowed 
    var wrapper   = $(".GCSE_wrap"); //Fields wrapper 
    var add_button  = $(".add_field_button"); //Add button ID 

    var x = 1; //initlal text box count 
    $(add_button).click(function(e){ //on add input button click 
     e.preventDefault(); 
     if(x < max_fields){ //max input box allowed 
      x++; //text box increment 
      $(wrapper).append('<div style="margin-top: 5px;"><div class="col-lg-5 col-md-5 col-sm-12 col-xs-12"><input type="text" name="Subject[]" class="form-control spec_one" id="GCSESubject[]" placeholder="Subject"></div><div class="col-lg-2 col-md-2 col-sm-12 col-xs-12"><input type="text" class="form-control spec_one" id="SubjectLevel[]" name="SubjectLevel[]" placeholder="GCSE?"></div><div class="col-lg-2 col-md-2 col-sm-12 col-xs-12"><select name="GCSEGrade[]" id="SubjectGrade[]" class="form-control spec_one"><option value="A*">A*</option><option value="A">A</option><option value="B">B</option><option value="c">C</option><option value="D">D</option><option value="E">E</option><option value="F">F</option><option value="g">G</option></select></div><div class="col-lg-2 col-md-2 col-sm-12 col-xs-12"><input type="text" class="form-control spec_one gcse_year" id="GCSEYear[]" name="GCSEYear[]" placeholder="Year"></div><a href="#" class="btn btn-primary cas_btn copy_gcse_all">C</a><a href="#" class="btn btn-primary close_btn remove_field">X</a></div>'); //add input box 
      $ 
     } 
    }); 

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
     e.preventDefault(); $(this).parent('div').remove(); x--; 
    }) 
}); 

Was ich versuche zu tun, um eine Funktion zu erstellen, die kopiert den Wert von GCSEYear [] (der Eingang, neben dem die C-Taste geklickt wird) und kopiert den Wert in alle nachfolgenden GCSEYear [] - Eingänge, aber nicht alle Eingänge des Typs GCSEYear [] (dort sind möglicherweise Eingaben vor, nicht danach, dass ich nicht geändert werden will).

Der folgende Code ist ein Beispiel, füllt jedoch alle Felder der Klasse gcse_year und nicht nur die nachfolgenden/nächsten Felder dieses Typs.

Ich weiß, dies ist eine relativ einfache Sache zu tun, aber ich wäre dankbar, wenn mir jemand in die richtige Richtung zeigen könnte.

Answer 1

Sie können erreichen, was Sie benötigen, indem Sie eine gemeinsame Klasse auf das übergeordnete Element div setzen, das Sie auf den Knopf Add anhängen. Sie können dann closest() verwenden, um div und dann nextAll() auszuwählen, um die nachfolgenden Geschwister zu erhalten, bevor find() die GCSE-Jahreseingaben zurückgibt, die Sie ändern möchten.

Hier ist ein voll funktionierendes Beispiel mit einigen anderen Verbesserungen der Logik:

var max_fields = 16; 
 
var $wrapper = $(".GCSE_wrap"); 
 
var $add_button = $(".add_field_button"); 
 

 
$add_button.click(function(e) { 
 
    e.preventDefault(); 
 
    if ($wrapper.find('> div').length < max_fields) { 
 
    $wrapper.append('<div style="margin-top: 5px;" class="wrapper-item"><div class="col-lg-5 col-md-5 col-sm-12 col-xs-12"><input type="text" name="Subject[]" class="form-control spec_one" placeholder="Subject"></div><div class="col-lg-2 col-md-2 col-sm-12 col-xs-12"><input type="text" class="form-control spec_one" name="SubjectLevel[]" placeholder="GCSE?"></div><div class="col-lg-2 col-md-2 col-sm-12 col-xs-12"><select name="GCSEGrade[]" class="form-control spec_one"><option value="A*">A*</option><option value="A">A</option><option value="B">B</option><option value="c">C</option><option value="D">D</option><option value="E">E</option><option value="F">F</option><option value="g">G</option></select></div><div class="col-lg-2 col-md-2 col-sm-12 col-xs-12"><input type="text" class="form-control spec_one gcse_year" name="GCSEYear[]" placeholder="Year"></div><a href="#" class="btn btn-primary cas_btn copy_gcse_all">C</a><a href="#" class="btn btn-primary close_btn remove_field">X</a></div>'); 
 
    } 
 
}); 
 

 
$wrapper.on("click", ".remove_field", function(e) { //user click on remove text 
 
    e.preventDefault(); 
 
    $(this).parent('div').remove(); 
 
}).on('click', '.copy_gcse_all', function(e) { 
 
    e.preventDefault(); 
 
    var $wrapperItem = $(this).closest('.wrapper-item'); 
 
    var year = $wrapperItem.find('.gcse_year').val(); 
 
    $wrapperItem.nextAll('.wrapper-item').find('.gcse_year').val(year); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="add_field_button">Add</button> 
 
<div class="GCSE_wrap"></div>

Beachten Sie auch, dass ich alle id Attribute aus der langen HTML-String Sie append(), da diese Ergebnisse entfernt in mehreren Elementen teilen die gleiche id die ungültige HTML ist.