如何使用jQuery提取.xyz容器内h1-h5标签文本值并存入数组

你已经通过$(".xyz")获取到了所有分组的父容器，只需要在遍历每个容器时，以当前容器为范围查找内部的h1~h5子元素，就能提取到对应组的文本值，不会跨组匹配。

可直接运行的代码 #

const groupList = [];

$('.xyz').each(function () {
  // 将当前遍历到的父容器转为jQuery对象
  const $group = $(this);
  // 按顺序提取当前组下h1到h5的内容
  const currentGroupData = [
    $group.find('h1').text().trim(),
    parseFloat($group.find('h2').text().trim()),
    parseFloat($group.find('h3').text().trim()),
    parseFloat($group.find('h4').text().trim()),
    parseFloat($group.find('h5').text().trim())
  ];
  groupList.push(currentGroupData);
});

// 打印结果验证
console.log(groupList);

核心要点说明 #

• 遍历.xyz集合时，回调函数内的this指向当前正在处理的原生DOM元素，用$(this)包装后即可调用jQuery方法
• 使用.find(选择器)方法只会在当前容器的后代节点中匹配元素，不会拿到其他分组的标题内容
• 提取文本后调用.trim()是为了清除可能存在的换行、空格等冗余字符；h2~h5的内容是数值，用parseFloat()转成数字类型方便后续计算，如果不需要做数值运算，直接保留文本即可
• 如果需要带字段名的结构化数据，把数组形式的currentGroupData换成对象形式即可，比如{ name: $group.find('h1').text().trim(), value1: xxx, value2: xxx }，按自己的业务需求定义字段就行。

内容的提问来源于stack exchange，提问作者Pete Harrison