时间戳

首页 > 解决方案 > 如何从具有数组名称的输入中获取名称和名称键

jquery - 如何从具有数组名称的输入中获取名称和名称键

问题描述

这是html输入：

<input name="item[5689]" type="text" value="abcdefgh"></input>
<input name="item[6535]" type="text" value="abcd1"></input>
<input name="item[9856]" type="text" value="abcd"></input>

所以需要这种类型的数组来进行后 ajax 调用：

5689 => abcdefgh
6535 => abcd1
9856 => abcd

jquery 是如何实现的？

在这里我尝试但没有成功：

$("input[name='item[^]']").each(function() {
  console.log("Name: " + this.name + ", index: " + $(this).index());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="item[5689]" type="text" value="abcdefgh"></input>
<input name="item[6535]" type="text" value="abcd1"></input>
<input name="item[9856]" type="text" value="abcd"></input>

标签： jquery

解决方案

不幸的是，没有属性匹配表达式选择器，所以你最好的选择是......

  1. 查找所有元素（按属性开头 - 选择器）
  2. 过滤它们以确保它们符合预期的格式
  3. 从名称中提取输入值和键并将它们映射到条目
  4. 将其减少到您想要的对象结果

const rx = /^item\[(.+?)]$/

const result = Object.fromEntries(
  jQuery("input[name^='item[']")
    .filter((_, { name }) => rx.test(name))
    .map((_, { name, value }) => [[ name.match(rx)[1], value ]])
    .get())
    
console.log(result)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="item[5689]" type="text" value="abcdefgh">
<input name="item[6535]" type="text" value="abcd1">
<input name="item[9856]" type="text" value="abcd">

jQuery.map()似乎将数组展平，因此[[...]]它适合于Object.fromEntries()

推荐阅读