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

Answer 1

使用attribute-starts with selector。要仅选择表单内的元素，请使用表单选择器。

[属性^=值]

表示属性名称为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

Docs

$("#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>