JQuery在动态添加或删除行后重置所有索引

我正在动态添加或删除div元素。我的示例html如下所示：

<!-- 1st dynamic block -->
<div class="container-fluid well dynamic-wrap">
<table class="table table-condensed">
    <tbody>
        <tr>
            <td><strong>LAN</strong></td>
            <td><input id="lan-1" name="details[0].lan" value="1" type="text"></td>
        </tr>
    </tbody>
</table>
</div>
<!-- 2nd dynamic block -->
<div class="container-fluid well dynamic-wrap">
<table class="table table-condensed">
    <tbody>
        <tr>
            <td><strong>LAN</strong></td>
            <td><input id="lan-1" name="details[0].lan" value="1" type="text"></td>
        </tr>
    </tbody>
</table>
</div>

局域网
局域网

在这里，我使用jqueryclone添加了第二个动态块。 现在单击“下一步”按钮，我需要在提交页面之前重置名称属性索引。 因此，对于第一个和第二个块名，属性将变为 name=“详细信息[0]。局域网” name=“详细信息[1]。局域网”

---

请提供一些如何在JQuery中执行此操作的解决方案。

您可以在克隆和添加表后执行类似操作

var last_tbl = $(".table-condensed:last");
var last_index = $(".table-condensed").length;
last_tbl.find("input").attr("id","lan-" + last_index).attr("name","details["+ (last_index - 1) +"].lan");

---

如果您只是想重新同步名称，只需执行以下操作。请记住，您应该重新同步id，并且id应该是唯一的

$('div table :text').each(function(i) {
    $(this).attr({
        'id': 'lan-' + (i+1).toString(),
        'name': 'details[' + i + '].lan'
    });
});

更新代码

这将允许您更新所有内容，而不考虑名称

$('div table :text').each(function(i) {
    var id = $(this).attr('id');
    var name = $(this).attr('name');

    id = id.replace(/-\d+/g, '-' + (i+1));
    name = name.replace(/\[\d+\]/g, '[' + i + ']');
    $(this).attr({
        'id': id,
        'name': name
    });
});

---

克隆后，您应该尝试以下方法

var input = $('.dynamic-wrap input').attr('name','details');
$.each(input,function(index,value){
    $(value).attr('name','details['+index+'].lan').prop('id','lan-'+index+'');
});

更新：

    var input = $('.dynamic-wrap input').attr('name','details');

    function resetTheOrder(){
    $.each(input,function(index,value){
        $(value).attr('name','details['+index+'].lan').prop('id','lan-'+index+'');
     });
    }

---

添加一些新的div后调用

resetTheOrder（）

我只是注意到还涉及到移除，所以这更好；）实际上，我正在寻找的是1）使用类“dynamic wrap”迭代div，然后对于每个迭代实例，再次迭代输入元素并重置索引。这个问题的任何解决方案。所以，你可以考虑有一个DIV包装两个块（第一和第二DyaANAMIC添加）我做了非常类似的项目，我目前正在项目，其中行添加和删除动态。不同之处在于，当我在执行移除之前执行移除时，我会得到要移除的行的索引值。现在我只需要从索引位置开始，循环到元素列表的末尾。所以如果你调整并结合我的答案和@BatuZet答案，会更有效率。明白你的方法了。但在我当前的项目中，用户可以删除任何已经添加的行（从任何位置），因此我认为在提交页面之前只需重置所有索引。在这个问题上有什么帮助吗？我试过这样做…但它不起作用：x=0；$（'.dynamicObj'）.each（函数（i，dynamicObj）{alert（“动态调用=>”+dynamicObj）；$（$dynamicObj）.find（':input'）.each（函数（j，obj）{if（obj.name！='transactionGrid\u wf'）{var objNameFirst=obj.name.indexOf（“[”）；var objNameLast=obj.name.name.substring（obj.name.name.lastinexof（“]）+1，obj.name.length）；if（$（obj.hasClass（“gridRowNum”）{//empty}else{obj.name=objNameFirst+“[”+i+“]“+objNameLast；//警报（obj.name）；}}）；x++；}我不需要在克隆后执行重置操作。但当用户单击“提交/下一步”按钮时，我需要执行重置操作。用户可以自由添加/删除许多div内容。提交页面时，我可以重置索引的任何解决方案。此外，我将在页面上有几个其他元素以及“lan”。我正在尝试这种方法，但不起作用。这里可能有什么错误$（'.dynamic wrap'）.each（函数i，dynamicObj）{alert（“动态调用=>”+dynamicObj）；$（$dynamicObj）.find（':input'）.each（函数j，obj）{alert（“obj.name=>”）；if（obj.name！='transactionGrid(u wf'）{var objNameFirst=obj.name.indexOf（“[”）；var obj.name=obj.name.lastIndexOf）]）+1，obj.name.length）；if（$（obj.hasClass（“gridRowNum”）{//empty}else{obj.name=objNameFirst+“[“+i+”]””]“+objNameLast；//alert（obj.name）；}}}}}）；x++；然后，请用更多代码和问题描述编辑您的问题，很难找到您想要达到的目的。
<!-- 1st dynamic block -->
<div class="container-fluid well dynamic-wrap">
<table class="table table-condensed">
    <tbody>
        <tr>
            <td><strong>LAN</strong></td>
            <td><input id="lan-1" name="details[0].lan" value="1" type="text"></td>
                <td class="remove">X</td>
        </tr>
    </tbody>
</table>
</div>
<!-- 2nd dynamic block -->
<div class="container-fluid well dynamic-wrap">
<table class="table table-condensed">
    <tbody>
        <tr>
            <td><strong>LAN</strong></td>
            <td><input id="lan-1" name="details[0].lan" value="1" type="text"></td>
                 <td class="remove">X</td>
        </tr>
    </tbody>
</table>
</div>
    <div class="container-fluid well dynamic-wrap">
<table class="table table-condensed">
    <tbody>
        <tr>
            <td><strong>LAN</strong></td>
            <td><input id="lan-1" name="details[0].lan" value="1" type="text"></td>
                 <td class="remove">X</td>
        </tr>
    </tbody>
</table>
</div>
        <div class="container-fluid well dynamic-wrap">
<table class="table table-condensed">
    <tbody>
        <tr>
            <td><strong>LAN</strong></td>
            <td><input id="lan-1" name="details[0].lan" value="1" type="text"></td>
                 <td class="remove">X</td>
        </tr>
    </tbody>
</table>
</div>
    <input type="button" id="add" name="add" value="ADD">

var input = $('.dynamic-wrap input').attr('name','details');

    function resetTheOrder(){
    $.each(input,function(index,value){
        $(value).attr('name','details['+index+'].lan').prop('id','lan-'+index+'');
     });
    }

$('#add').on('click',function(){
// after adding new row
    resetTheOrder();
});

$('.remove').on('click',function(){
// after deleting new row
    resetTheOrder();
});