JavaScript获取包含数组键的字段数组的长度

Question

我有一个简单的表单，里面有一个数组：

<form id='my_form'>
    <input type="text" name="my_array[1]">
    <input type="text" name="my_array[5]">
    <input type="text" name="my_array[6]">
    <input type="text" name="non_array_field">
</form>

如您所见，数组键已指定。

我该如何获取此数组的长度？我可以使用JavaScript或jQuery。

这些仅适用于数组没有键的情况：

document.querySelectorAll("[name='my_array[]']").length
document.formName.elements["my_array[]"].length

- ipel

Answer 1

使用属性开始选择器。要仅选择表单内的元素，请使用表单选择器。

[attr^=value]

表示具有属性名称为 attr，其值以 "value" 为前缀的元素。

document.querySelectorAll("#my_form [name^='my_array[']").length

var len = document.querySelectorAll('#my_form [name^="my_array["]').length;
console.log(len);

<form id='my_form'>
  <input type="text" name="my_array[1]">
  <input type="text" name="my_array[5]">
  <input type="text" name="my_array[6]">
  <input type="text" name="non_array_field">
</form>

使用jQuery

文档

$("#my_form [name^='my_array[']").length

var len = $('#my_form [name^="my_array["]').length;
console.log(len);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form id='my_form'>
  <input type="text" name="my_array[1]">
  <input type="text" name="my_array[5]">
  <input type="text" name="my_array[6]">
  <input type="text" name="non_array_field">
</form>

- Tushar

---

要在选择器中使用正则表达式，请参见将正则表达式传递给JQuery选择器。 - Tushar