jQuery 如何从多个相似的输入字段构建 JSON 数组？答案

【问题标题】：How jQuery build JSON array from multiple similar input fields?jQuery 如何从多个相似的输入字段构建 JSON 数组？
【发布时间】：2013-08-22 06:25:41
【问题描述】：

我有以下 HTML 代码。我想为每个additionalAddress(x) 获取第一个地址以构建一个不错的数组，以便我可以将它们插入到数据库中。这都是 jQuery append 逻辑的一部分，因此地址可以不受限制。

<div class="controls" id="Locations">

<input class="span7" type="text" placeholder="Full Address" id="Address" style="margin: 0px 5px 5px 0;"><br>
<input class="span3" type="text" placeholder="(555) 555-5555" id="Phone" name="Phone" onkeyup="drawPhone(this);" style="margin: 0px 5px 5px 0;">
<input class="span4" type="text" placeholder="name@mybusiness.com" id="Email" onkeyup="drawEmail(this);"> <i class="icon-plus-sign" id="addAddress"></i>

<span id="additionalAddress1"><br><br>
    <input class="span7" type="text" placeholder="Full Address" id="Address1"><br><input class="span3" type="text" placeholder="(555) 555-5555" id="Phone1" name="Phone"><input class="span4" type="text" placeholder="name@mybusiness.com" id="Email1" > <i class="icon-minus-sign" id="removeAddress"></i></span>

<span id="additionalAddress2"><br><br><input class="span7" type="text" placeholder="Full Address" id="Address2"><br><input class="span3" type="text" placeholder="(555) 555-5555" id="Phone2" name="Phone"><input class="span4" type="text" placeholder="name@mybusiness.com" id="Email2" style="margin: -4px 0px 0 11px;"> <i class="icon-minus-sign" id="removeAddress"></i></span>

<span id="additionalAddress3"><br><br><input class="span7" type="text" placeholder="Full Address" id="Address3"><br><input class="span3" type="text" placeholder="(555) 555-5555" id="Phone3" name="Phone"><input class="span4" type="text" placeholder="name@mybusiness.com" id="Email3"> <i class="icon-minus-sign" id="removeAddress"></i></span>

</div>

【问题讨论】：

这个问题真的需要inline styles吗？另外你有多个#Address
ID 必须是唯一的
您不能对不同的元素使用 id。您可以为此使用name 或class 属性。
我会将 (x) 附加到每个 ID。那我该如何继续解决。更新了问题以反映推荐的 cmets。

标签： javascript jquery html foreach

【解决方案1】：

如果附加地址的数量是固定的，可以使用

[
    $("#Address").val(),
    $("#additionalAddress1 > input").val(),
    $("#additionalAddress2 > input").val(),
    $("#additionalAddress3 > input").val()
]

假设您删除了 input 跨度内的 input 元素的 ID。

[edit]如果不固定，可以使用：

var addresses = [$("#Address").val()];
$("span[id^='additionalAddress'] > input[id^='Address']").each(function(i,e) {
    addresses.push($(e).val());
});

假设additionalAddressX 跨度内的input 元素具有类似AddressX 的ID。

【讨论】：

额外地址不会固定
一切看起来都很棒。我将如何包含其他地址的相应电子邮件和电话号码，并有一个数组来保持“分开”？
您可以只使用最新的块并将 ID 替换为电话和电子邮件字段的 ID

【解决方案2】：

var address = new Array();
$("#Locations").find('span[id^="additionalAddress"]').each(function() {
    var temp = " " + $(this).find("input[id^='Address']").val();
    address.push(temp);
});
alert(address);

见demo

【讨论】：

如何获得相应地址的电话和电子邮件？