javascript - 如何用jquery循环查找和替换

Question

我在这里做了一些搜索，但找不到确切的答案来解决这个问题。我目前有动态 div，其中添加了选择元素到表单中。输入名称作为数组放置，这些 div 也可以动态删除。我需要找到一种方法，当用户删除此 div 时，下面的 div 和输入将被重命名。我希望这是有道理的。以下是用户删除包含输入字段的 div 后发生的情况的示例:

<div class="rooms" id="row1">
  <input type="text" name="room[1][adults]">
  <input type="text" name="room[1][children]">
</div>
<div class="rooms" id="row3">
  <input type="text" name="room[3][adults]">
  <input type="text" name="room[3][children]">
</div>

我需要能够循环 .rooms div 并查找并替换输入的 name 属性上的数字元素。因此 room[3][adults] 需要更改为 room[2][adults]。循环运行时一次最多可以有八个 div。这是我的一个想法，但我不知道如何替换中间的那个数字。

var i = 1;
$(".rooms").each(function () {
  var thisId = $(this).attr('id');
  var numToFind = thisId.substr(thisId.length - 1);
  $("#"+thisId).find("select[name='room["+numToFind+"][adults]']").replace( 'room["+numToFind+"][adults]','room["+i+"][adults]');
  $("#"+thisId).find("select[name='room["+numToFind+"][children]']").replace( 'room["+numToFind+"][children]','room["+i+"][children]');
  i = i + 1;
});

这就是我能想到的所有内容，任何帮助实现这一点的帮助都将不胜感激!

Answer 1

存在多个问题

• find() 返回一个没有 replace() 方法的 jQuery 对象
• 仅仅使用replace是不够的，你需要获取名称，替换内容并将其设置回来

您可以使用简单的迭代和替换，例如

var i = 1;
$(".rooms").each(function() {
  $(this).find('input[name^=room]').attr('name', function(idx, name) {
    return name.replace(/\[\d+\]/, '[' + i + ']');
  });
  i++;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="rooms" id="row1">
  <input type="text" name="room[1][adults]">
  <input type="text" name="room[1][children]">
</div>
<div class="rooms" id="row3">
  <input type="text" name="room[3][adults]">
  <input type="text" name="room[3][children]">
</div>
<div class="rooms" id="row3">
  <input type="text" name="room[3][adults]">
  <input type="text" name="room[3][children]">
</div>
<div class="rooms" id="row3">
  <input type="text" name="room[3][adults]">
  <input type="text" name="room[3][children]">
</div>