使用 Javascript/jQuery 的动态元素名称属性答案

【问题标题】：Dynamic element name attributes with Javascript/jQuery使用 Javascript/jQuery 的动态元素名称属性
【发布时间】：2011-10-31 20:33:46
【问题描述】：

我的 HTML 结构是这样的：

<div>
  <input type="text" name="array[a][b][0][foo]" />
  <input type="text" name="array[a][b][0][bar]" />
  <select name="array[0][a][b][baz]>...</select>
</div>

元素值通过 POST 提交并由 PHP 处理。 select 元素附加了一个 change 事件，即 clones 父 div 并将其附加在下面。

当div 被克隆时，元素的名称仍然相同，并且值会相互覆盖，我不希望这种情况发生。所有array[a][b] 元素都是数组类型，因此我不能简单地使用array[a][b][]（foo/bar/baz 值将不再被分组）。

解决此问题的最佳方法是在克隆名称时更改名称？这意味着需要增加索引。我不能在这里使用简单的el.name.replace(N, N + 1)，因为该名称可能多次出现 N。

【问题讨论】：

你到底想在这里做什么？我看了你的描述好几遍了，还是一头雾水。

标签： php javascript html arrays post

【解决方案1】：

您可以将一个类命名为父类 <div>，然后在克隆时使用该类名称。

<div class="a">
  <input type="text" name="array[a][b][0][foo]" />
  <input type="text" name="array[a][b][0][bar]" />
  <select name="array[0][a][b][baz]>...</select>
</div>
<div class="a">
  <input type="text" name="array[a][b][1][foo]" />
  <input type="text" name="array[a][b][1][bar]" />
  <select name="array[1][a][b][baz]>...</select>
</div>

然后，在你的 javascript 中你可以这样做：

var n = $('.a').length;

这使用 jquery 返回2，您可以将其与替换函数一起使用。

【讨论】：