javascript - 使用 jquery 根据元素在父元素中的位置重新排序元素名称

Question

<div class="content">

    <div>
        <input type="text" name="newname[name]0"/>
        <div>
           <input type="text" name="newname[utility]0"/>
           <div>
               <textarea name="newname[text]0"></textarea>
           </div>
        </div>
    </div>

    <div>
        <input type="text" name="somename[name]1"/>
        <div>
           <input type="text" name="somename[utility]1"/>
        </div>
        <div>
           <textarea name="somename[text]1"></textarea>
        </div>
    </div>

    ... etc ...

</div>

使用 jquery's selector 的有效方法是什么？根据当前位置对所有输入元素(input、textarea)重新排序？即，如果用户从父元素中删除 newname[name]0 div，则 somename[name]1 将向上移动并应重命名为 somename [名称]0。

我认为应该是这样的:

$(".content").children().each( function(index, val) {
    val.find(":input").each(function(i, inputvalue) {
       // Somehow extract the current name of inputvalue and replace the number with index?
    });
});

Answer 1

你可以尝试这样的事情:

$(".content :input").attr('name', function(i,oldAttr){
                              return oldAttr.split(']')[0] + "]" + i;
                         });

假设你的属性name的值的格式是一致的。

.attr()

Demo.

在demo中，尝试双击某个输入元素将其移除，然后使用浏览器的元素检查器工具查看结果。

如果 name 属性有一些不一致的格式(有可能它可能包含超过 1 个 ] 字符)但它总是有一些索引附加在结束，那么你可以尝试这个更可靠的正则表达式解决方案:

 $(".content :input").attr('name', function(i,oldAttr){
                          return oldAttr.replace(/\d*$/,'') + i;
                     });

Demo 2