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[name]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

您可以使用.attr方法提供的索引为您的元素设置类，并通过.each设置其名称：

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

JS：

$(".content").children().each(function(index) {
      $(this).find(".inp-name").attr("name", "newname[name]" + index);
      $(this).find(".inp-utility").attr("name", "newname[utility]" + index);
      $(this).find(".inp-text").attr("name", "newname[text]" + index);
});

修改

你可以使用某种字符分割器：

$(".content").children().each(function(index) {
      $(this).find(":input").each(function() {
          var name = $(this).attr("name");
          var spl = name.split(']');
          $(this).attr("name", name.replace(spl[spl.length-1], index));
      });
});

Answer 2

您可以尝试这样的事情：

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

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

.attr()

Demo.

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

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

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

Demo 2

使用jquery在父级中的位置重新排序元素名称

2 个答案:

.attr()

Demo.