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

我看到了下面的html，其中有一个计数器，一个名为“addmetric”的按钮被按下的次数。我将使用这个数值将它分配给一些通过按下按钮本身创建的html

我添加元素没有问题，计数器工作得很好。问题是当我需要在所有生成的内容中间删除一些东西。 例如，当我按下4次<代码>“添加度量”<代码>按钮时，生成的代码将是：

<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>

问题：有解决此问题的方法吗？这是我的建议

以下是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+"][]");


        });

});

$（文档）.ready（函数（）{
/*
*添加公制按钮
*/
$（“#AddMoreFileBox”）。单击（函数（）{
var FieldCount=$（'#MetricsCnt'）.val（）；
FieldCount++；
$（'#MetricsCnt'）.val（字段计数）；
$（“#InputsRapper”）。追加
(''
+'度量：
'
+'标记：
'
+''
+''
+''
+''
+'聚合器：
'
+''//聚合器-0 prima volta
+''
+''
+''
+'');
返回false；
});
/*
*删除度量
*/
$（“body”）。在（“click”、“.removeclass”上，函数（e）{//用户单击删除文本
$（this）.parent（'div'）.remove（）；//删除文本框
var FieldCount=$（'#MetricsCnt'）.val（）；
字段计数--；
$（'#MetricsCnt'）.val（字段计数）；
返回false；
});
/*
*添加标签按钮
*/
//var值cnt=0；
$（“#inputswraper”）。在（'click'，“.addtag”，函数（）{
var idTags=$（this.attr（'id'）；
var tagCounter=$（'#AddBox'+idTags）.val（）；
tagCounter++；
$（'#AddBox'+idTags）.val（tagCounter）；
$（'#标记-'+idTags）。追加
（'Id:'+//好的
“值：
”）；
//返回false；
});
/*
*添加聚合器按钮
*/
$（“#inputswraper”）。在（'click'，“.agg”，function（）上{
var id=$（this.attr（'id'）；
//警报（ids）；
var aggCounter=$（'#AggBox'+ids）.val（）；
aggCounter++；
$（'#AggBox'+ids）.val（aggCounter）；
$（'#聚合器-'+ID）。追加(
'类型：'+
“采样：”+
“
”）；
返回false；
});
/*
*使用mouseleave函数更新每个tagID更改
*/
$（'#inputswraper'）.on（'mouseleave'，'.tagsIdentifier'，function（）{
var tagIdentifierId=$（this.attr（'id'）；
var provaId=$（this.attr（“id”）.split（“-”）；
var tagIdValue=$（this.val（）；
$（'#TagValue-'+provaId[1]）.attr（“名称”，“度量[”+provaId[1].charAt（0）+“][tags][”+tagIdValue+“][”）；
});
});

您的问题的答案是肯定的。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', ...);
  ...
}

---

for（var i=numRemoved+1；i OP已经添加了JsFiddleBah，没有看到。谢谢！为了快速找到它，我也在这里链接了：）谢谢你的回答，把for循环代码放在我的脚本中哪里比较好？没什么关系。。。可能在两行之间var FieldCount=$（“#MetricsCnt'）.val（）；和字段计数--；我不太明白如何使用for来修改输入ID，抱歉：）for循环会遍历每个高于已删除度量数的数字，因此应该减少。@Markviduka:我的代码中有一个关于numRemoved的错误，因为它得到的是“metric-x”而不是实际的数字x。我还在这里更新了您的fiddle：（注意，我只更改了div的id和输入的名称，您可以以类似的方式添加更多更改。）
var numRemoved = parseInt($(this).parent('div')[0].id.substr(7));

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