如何用jQuery动态创建名为groups的指定结构对象数组？

看起来你已经握了核心方法，我直接给你梳理完整的实现思路和代码示例，完全贴合你的需求：

假设你的HTML结构参考 #

先模拟一个常见的结构（你可以根据自己的实际DOM结构调整选择器）：

<!-- 每个带ID的容器就是一个组 -->
<div id="group1" class="group">
  <!-- 每组内的属性项：左边是属性名，右边是属性值 -->
  <div class="attr-name">成员数量</div>
  <div class="attr-value">5</div>
  
  <div class="attr-name">组类型</div>
  <div class="attr-value">项目协作</div>
</div>

<div id="group2" class="group">
  <div class="attr-name">成员数量</div>
  <div class="attr-value">3</div>
  
  <div class="attr-name">组类型</div>
  <div class="attr-value">兴趣交流</div>
  
  <div class="attr-name">创建时间</div>
  <div class="attr-value">2024-01-15</div>
</div>

jQuery实现代码 #

// 初始化空数组
const groups = [];

// 遍历所有组容器（这里用.group类选择，你可以换成自己的选择器）
$('.group').each(function() {
  // 获取当前组的名称（即元素ID）
  const groupName = $(this).attr('id');
  // 初始化当前组的属性对象
  const groupObj = {};
  
  // 遍历当前组内的所有属性名元素（这里按“属性名+相邻属性值”的结构处理）
  $(this).find('.attr-name').each(function() {
    // 获取属性名，用trim()去除前后冗余空格
    const attrKey = $(this).text().trim();
    // 获取对应的属性值（这里假设属性值是当前元素的下一个兄弟元素）
    const attrValue = $(this).next('.attr-value').text().trim();
    
    // 把键值对添加到组对象中
    groupObj[attrKey] = attrValue;
  });
  
  // 将组装好的组对象添加到groups数组
  groups.push({ [groupName]: groupObj });
});

// 测试输出，验证结果是否符合预期
console.log(groups);

关键细节说明 #

• 选择器灵活调整：如果你的DOM结构和示例不同（比如属性名和属性值包裹在同一个容器里），只需要修改内部的选择逻辑即可，核心还是用.each()遍历、.attr('id')获取组名、.text()提取文本内容。
• 文本冗余处理：添加.trim()是为了避免文本前后的空格或换行干扰属性的键值对，如果你不需要可以直接去掉。
• 动态属性名实现：用{ [groupName]: groupObj }这种ES6计算属性名语法，直接把元素ID作为对象的键，完美匹配你“以ID为组名称”的需求。

如果你的实际DOM结构有特殊情况，比如属性项的嵌套逻辑不一样，可以随时告诉我具体结构，我再帮你调整代码～

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