如何根据jquery中的父级和内部父级动态更改输入元素的索引

Question

如何根据 jQuery 中的父级和内部父级计数动态更改输入元素的索引。 在以下代码中如何更改表单元素的索引

<div id='parent_container0'>
    <div id='parent_inner_container0'>
      <label> Name </label>
        <input type='text' name='name[]'/>
        <div id='child_container0'>
            <div id='child_inner_container0'>
                <label> Email </label>
                <input type='text' name='email[]'/>
                <label> Phone </label>
                <input type='text' name='phone[]'/>
            </div>
        </div>
    </div>
</div>
<div id='parent_container1'>
<div id='parent_inner_container1'>
    <label> Name </label>
    <input type='text' name='name[]'/>
    <div id='child_container1'>
        <div id='child_inner_container1'>
            <label> Email </label>
            <input type='text' name='email[]'/>
            <label> Phone </label>
            <input type='text' name='phone[]'/>
        </div>
    </div>
</div>
</div>

我需要更改表单元素的名称为

name[0]
email[0][0]
phone[0][0]
name[1]
email[1][0]
phone[1][0]

基于 jQuery 中这些元素的父级索引。 我怎样才能做到这一点？ 任何帮助表示赞赏。 谢谢，

注意：要求是使用嵌套表单添加更多的父表单和子表单，每个表单都有嵌套表单字段我使用以下代码更改索引。

$('.parent_container').each(function(i) { 
    var pindex = $(this).index(); 
    var mainfrm=$(this); 
    var orgname=""; 
    mainfrm.find('.parent_container_inner').each(function(j) {  
        $(this).find('input, select, textarea').each(function(k){ 
            orgname = $(this).attr('name'); 
            orgname = orgname.replace(/[[]\d]+/g,""); 
            $(this).attr('name', orgname+"["+pindex+"]["+j+"]["+k+"]"); 
        }); 
    }); 
});

Answer 1

首先，您应该选择您的父“容器”：

$("div[id^=parent_container]").each(function(){
    console.log(this);
});

它将打印您的两个parent_container（parent_container0 和parent_container1）。在这里查看如何将选择器属性与Starts With一起使用

然后您需要找到并替换所有name[]、email[] 和phone[]。 所以，你应该使用Ends With，找到每个input你需要替换name

$("div[id^=parent_container]").each(function(){
    var parentContainerId = this.id.replace('parent_container', '');
    $(this).find("input[name$='[]']").each(function(){
        var newName = this.name.replace('[]', '[' + parentContainerId + ']');
        this.name = newName;
    })
});

这里是Fiddle

另外，关于你的问题，你一定要好好看看JQuery Selectors