如何用jQuery元素部分匹配提取成人姓名至对象二维数组

需求说明 #

需要从动态生成的页面元素中，通过jQuery结合元素名称部分匹配的方式，提取所有成人用户的名字（first_name）与姓氏（last_name），整理为如下格式的二维对象数组：

[
  [
    { "first_name": "Anish", "last_name": "gopi" },
    { "first_name": "Vinay", "last_name": "prasad" }
  ],
  [
    { "first_name": "Ananaya", "last_name": "vital" },
    { "first_name": "Guru", "last_name": "govind" }
  ]
]

修正后的代码 #

JavaScript 代码

// 初始化最终结果数组
const adultUsers = [];

// 遍历每个.pax_details分组容器
$('.pax_details').each(function() {
  // 存储当前分组下的成人用户数据
  const groupUsers = [];
  
  // 遍历当前分组内的每个成人用户项
  $(this).find('.adult_pax').each(function() {
    // 通过属性前缀匹配获取名字和姓氏输入框的值
    const firstName = $(this).find('input[name^="first_name_"]').val();
    const lastName = $(this).find('input[name^="last_name_"]').val();
    
    // 将用户信息存入当前分组数组
    groupUsers.push({
      first_name: firstName,
      last_name: lastName
    });
  });
  
  // 将当前分组的用户数组加入最终结果
  adultUsers.push(groupUsers);
});

// 输出结果，可根据业务需求直接使用该数组
console.log(adultUsers);

HTML 结构

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="pax_details">
  <div class="adult_pax">
    <input name="first_name_1" value="Anish" />
    <input name="last_name_1" value="gopi" />
  </div>
  <div class="adult_pax">
    <input name="first_name_2" value="Vinay" />
    <input name="last_name_2" value="prasad" />
  </div>
</div>
<div class="pax_details">
  <div class="adult_pax">
    <input name="first_name_3" value="Ananaya" />
    <input name="last_name_3" value="vital" />
  </div>
  <div class="adult_pax">
    <input name="first_name_4" value="Guru" />
    <input name="last_name_4" value="govind" />
  </div>
</div>

代码说明 #

• 以adultUsers作为最终的二维结果数组，对应每个.pax_details容器的子数组
• 通过name^="first_name_"和name^="last_name_"的前缀匹配选择器，精准定位动态生成的输入框
• 每个.pax_details容器内的成人用户数据会被整理为一个子数组，最终组合成符合要求的二维对象数组结构

内容的提问来源于stack exchange，提问作者B L Praveen