javascript - 如何更改与其父 div 索引号相关的输入名称

Question

我有多个表单输入，它们在名称中使用数组。表格可以由用户复制。当表单重复时，输入字段的名称会相应更改。基本上这就是我的表格

<div class="machine-stations">
    <div class="property-container">
      <input name="machine[process][0][system][100][station][52][name]" />
      <input name="machine[process][0][system][100][station][52][price]" />
      <!-- more input fields -->
    </div>
</div>
<div class="machine-stations">
    <div class="property-container">
      <input name="machine[process][1][system][100][station][60][name]" />
      <input name="machine[process][1][system][100][station][52][price]" />
      <!-- more input fields -->
    </div>
</div>
<div class="machine-stations">
    <div class="property-container">
       <input name="machine[process][2][system][100][station][40][name]" />
       <input name="machine[process][2][system][100][station][52][price]" />
       <!-- more input fields -->
    </div>
</div>

我想要完成的是，我必须根据 .machine-stations 索引号更改 [process] 之后的数字。用户可以复制.machine-stations。如果输入字段包含在 .machine-stations 索引 0 中，则 [process] 之后的数字应为 0，依此类推。谢谢!

Answer 1

我相信这就是您要找的:http://jsfiddle.net/GQbCV/1/

var $inputs = $(".machine-stations").find("input");
$inputs.each( function(i) {
    this.name = this.name.replace(/\[process\]\[\d+\]/,"[process]["+i+"]");
});

在 fiddle 中，我更改了 html 中的数字，以便它们可以改回 0,1,2。

既然你说以上不是你要找的，也没有澄清，我会再次猜测......使用你更新的 html 结构。这会将每个 .machine-stations 中的索引重新设为 0:http://jsfiddle.net/GQbCV/2/

$(".machine-stations").each( function() {
    $(this).find("input").each( function(i) {
        this.name = this.name.replace(/\[process\]\[\d+\]/,"[process]["+i+"]");
    });
});

第三个猜测...在这种情况下，第一个 .machine-stations 中的所有内容都将为 0，第二个中的所有内容将为 1，等等。http://jsfiddle.net/GQbCV/3/

$(".machine-stations").each( function(i) {
    $(this).find("input").each( function() {
        this.name = this.name.replace(/\[process\]\[\d+\]/,"[process]["+i+"]");
    });
});