jQuery - 根据计数器值更新输入名称和ID

Question

我有一个计数器的下面的html，这个计数器需要按下一个名为"Add Metric"的按钮的次数。我将使用此数值将其分配给通过按下按钮本身创建的某个html。

我没有问题添加元素，柜台效果很好。问题在于我需要在所有生成的内容中删除某些内容。 例如考虑当我按4倍"Add Metric"按钮，生成的代码将是：

<div id="metric-0"> .... </div> 
<div id="metric-1"> 
    .... 
    <input type="text" name="metrics[1][name]" value="Text 1"></div> 
    .... 
</div> 
<div id="metric-2"> 
    .... 
    <input type="text" name="metrics[2][name]" value="Text 2"></div> 
    .... 
<div id="metric-3"> .... </div> 

如果我需要删除，让我们说，在第二个div（<div id="metric-1">），我会得到这样的：

<div id="metric-0"> .... </div> 
<div id="metric-1"> 
    .... 
    <input type="text" name="metrics[1][name]" value="Text 1"></div> 
    .... 
</div> 
<div id="metric-2"> .... </div> 

凡metric-2和metric-3在metric-1和metric-2

无论如何变换，我不明白的地方，我错了，I C一个仅获得这种情况下，当所有的div保持自己的名字

<div id="metric-0"> .... </div> 
<div id="metric-2"> .... 
    .... 
    <input type="text" name="metrics[2][name]" value="Text 2"></div> 
    .... 
</div> 
<div id="metric-3"> .... </div> 

问：有解决这个问题的解决方案？这里的fiddle

这里的HTML：

<div id="InputsWrapper"> 
     <input type="button" id="AddMoreFileBox" value="Add Metric"> 
     MetricsCounter: <input type="text" id="MetricsCnt" value="-1" /> 
</div> 

这是jQuery代码：

$(document).ready(function() { 
    /* 
    * Add Metric Button 
    */ 
    $("#AddMoreFileBox").click(function(){ 
     var FieldCount = $('#MetricsCnt').val(); 
     FieldCount++; 
     $('#MetricsCnt').val(FieldCount); 
     $("#InputsWrapper").append 
      ('<div id="metric-'+FieldCount+'">' 
      +'Metric:<input type="text" name="metrics['+ FieldCount +'][name]" value="Text '+ FieldCount+'"/><br/>' 
      +'<label>Tags:</label><br/>' 
      +'<div id="tags-'+FieldCount+'">' 
      +'<input type="button" class="addtag" id="'+FieldCount+'" value="+ Tag">' 
      +'<input type="hidden" id="AddBox'+FieldCount+'" value="-1" />' 
      +'</div>' 
      +'<label>Aggregator:</label><br/>' 
      +'<div id="aggregators-'+FieldCount+'">' // Aggregators-0 prima volta 
      +'<input type="button" class="agg" id="'+FieldCount+'" value="+ Aggregator">' 
      +'<input type="hidden" id="AggBox'+FieldCount+'" value="-1" />' 
      +'</div>' 
      +'<a href="#" class="removeclass">&times;</a></div>'); 
    return false; 
    }); 

    /* 
    * Delete a Metric 
    */ 
    $("body").on("click",".removeclass", function(e){ //user click on remove text 
     $(this).parent('div').remove(); //remove text box 
     var FieldCount = $('#MetricsCnt').val(); 
     FieldCount--; 
     $('#MetricsCnt').val(FieldCount); 
    return false; 
    }); 
    /* 
    * AddTag Button 
    */ 
    //var valueCnt = 0; 
    $("#InputsWrapper").on('click', ".addtag", function(){ 
     var idTags = $(this).attr('id'); 
     var tagCounter = $('#AddBox'+idTags).val(); 
     tagCounter++; 
     $('#AddBox'+idTags).val(tagCounter); 
     $('#tags-'+idTags).append 
     ('Id: <input type="text" class="tagsIdentifier" id="TagId-'+idTags+tagCounter+'" />'+ //OK 
     'Value: <input type="text" class="tagValues-'+idTags+tagCounter+'" id="TagValue-'+idTags+tagCounter+'" name="metrics['+idTags+'][tags][][]" /></div><br/>'); 
     //return false; 
    }); 

    /* 
    * Add Aggregator Button 
    */ 
    $("#InputsWrapper").on('click', ".agg", function(){ 
     var ids = $(this).attr('id'); 
     //alert(ids); 
     var aggCounter = $('#AggBox'+ids).val(); 
     aggCounter++; 
     $('#AggBox'+ids).val(aggCounter); 
     $('#aggregators-'+ids).append(
       'Type: <input type="text" name="metrics['+ids+'][aggregators]['+aggCounter+'][name]" />'+ 
       'Sampling: <input type="text" name="metrics['+ids+'][aggregators]['+aggCounter+'][sampling][value]" />'+ 
       '<input type="text" name="metrics['+ids+'][aggregators]['+aggCounter+'][sampling][unit]" /><br/>'); 
     return false; 
     }); 

    /* 
    * Updates every tagID change using the mouseleave function 
    */ 
    $('#InputsWrapper').on('mouseleave', '.tagsIdentifier', function(){ 
      var tagIdentifierId = $(this).attr('id'); 
      var provaId=$(this).attr("id").split("-"); 
      var tagIdValue = $(this).val(); 
      $('#TagValue-'+provaId[1]).attr("name","metrics["+provaId[1].charAt(0)+"][tags]["+tagIdValue+"][]"); 


     }); 

}); 

Answer 1

的回答你的问题是肯定的。该HOWTO是非常简单的，但它是一个有点不方便......的方法如下： 在拆卸指标，获取删除的度量的数量由类似

var numRemoved = parseInt($(this).parent('div')[0].id.substr(7)); 

（显然这行到底座卸下DIV之前）

然后在这样一个循环命名以下所有指标和责任：。

for (var i = numRemoved + 1; i <= FieldCount; i++) { 
    // rename objects 
    var metric = $("#metric-" + i); 
    metric[0].id = "metric-" + (i - 1); 
    metric.find(...).attr('name', ...); 
    ... 
} 

（段计数这里是下降之前）