クローン時に入力名[0]から[1]にカウントする方法

Question

私はLaravelで使用している動的フォームの入力フィールドのインデックスを数えようとしていますが、それ。

これは私が使用している私の現在のコードです：

HTML：

<div id="language"> 
    <div class="language"> 
     <div class="row"> 
      <div class="form-group col-md-6 col-sm-6"> 
       <input class="form-control" placeholder="Language" name="language[0][name]" type="text"> 
      </div> 
      <div class="form-group col-md-6 col-sm-6"> 
       <select class="form-control" title="Language level" name="language[0][level]"><option value="medium">Medium</option><option value="good">Good</option><option value="perfect">Perfect</option></select> 
      </div> 
      <p><a href="#" class="addsection">Add Section</a></p> 
     </div> 
    </div> 
    </div> 

JS：

//Clone fields 

//define template 
var template = $('#language .language:first').clone(); 

//define counter 
var sectionsCount = 1; 
//add new section 
$('body').on('click', '.addsection', function() { 


    //increment 
    sectionsCount++; 

    //loop through each input 
    var section = template.clone().find(':input').each(function(){ 

     //set id to store the updated section number 
     var newId = this.id + sectionsCount; 

     //update for label 
     $(this).prev().attr('for', newId); 

     //update id 
     this.id = newId; 

    }).end() 

    //inject new section 
     .appendTo('#language'); 
    return false; 


}); 

私はフィールドのクローンを作成する場合、どのように私は作ることができます[0]カウントアップ？ カウントが下がるフィールドを削除するとどうなりますか？

Answer 1

あなたは値が[0]になるようにフィールドにクローン化された属性名を更新する必要があり、新たな要素を[1]、[2]、...作成すると

コードは次のとおりです。私は削除アンカーとコードを追加部分を除去するために

var txtName = this.getAttribute('name'); 

    txtName = txtName.replace('[0]', '[' + (sectionsCount - 1) + ']'); 

    this.setAttribute('name', txtName); 

である：

$('body').on('click', '.removesection', function() { 
     $(this).closest('.language').remove(); 
    }); 

スニペット：

$(function() { 
 
    //Clone fields 
 

 
    //define template 
 
    var template = $('#language .language:first').clone(); 
 

 
    //define counter 
 
    var sectionsCount = 1; 
 
    //add new section 
 
    $('body').on('click', '.addsection', function() { 
 

 

 
    //increment 
 
    sectionsCount++; 
 

 
    //loop through each input 
 
    var section = template.clone().find(':input').each(function(){ 
 

 
     //set id to store the updated section number 
 
     var newId = this.id + sectionsCount; 
 

 
     //update for label 
 
     $(this).prev().attr('for', newId); 
 

 
     //update id 
 
     this.id = newId; 
 
     var txtName = this.getAttribute('name'); 
 
     txtName = txtName.replace('[0]', '[' + (sectionsCount - 1) + ']'); 
 
     this.setAttribute('name', txtName); 
 

 
    }).end() 
 

 
    //inject new section 
 
    .appendTo('#language'); 
 
    return false; 
 

 

 
    }); 
 

 
    // remove current section 
 
    $('body').on('click', '.removesection', function() { 
 
    $(this).closest('.language').remove(); 
 
    }); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div id="language"> 
 
    <div class="language"> 
 
     <div class="row"> 
 
      <div class="form-group col-md-6 col-sm-6"> 
 
       <input class="form-control" placeholder="Language" name="language[0][name]" type="text"> 
 
      </div> 
 
      <div class="form-group col-md-6 col-sm-6"> 
 
       <select class="form-control" title="Language level" name="language[0][level]"><option value="medium">Medium</option><option value="good">Good</option><option value="perfect">Perfect</option></select> 
 
      </div> 
 
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="addsection">Add Section</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="removesection">Remove Section</a></p> 
 
     </div> 
 
    </div> 
 
</div>