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

Reordering element names based on their position in parent with jquery

本文关键字：元素 新排序 排序 位置 jquery 使用      更新时间：2023-09-26
<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的选择器重新排序所有输入元素(input, textarea)基于他们的当前位置?即，如果用户从父元素中删除newname[name]0div，则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?
    });
});

您可以尝试这样做:

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

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

.attr ()

演示。

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

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

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

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

<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));
      });
});
相关文章：