如何在jQuery/JavaScript中按数据属性分组创建多维数组

我看了你遇到的问题——点击按钮后想把列表项按data-type分组，构建成嵌套的结构化数据，但之前的代码里有几个小问题导致没得到预期结果，咱们一步步来修正：

先说说你原有代码里的问题 #

• 选择器拼写错误：$('#lisDiv li') 应该是 $('#listDiv li')（少了个t），不然根本选不到目标元素
• 用错了数据结构：你初始化了var data = [];（数组），但数组是索引型的，而你需要用字符串（比如edit、create）作为键，这时候应该用对象（{}）来存储分组
• 重复重置分组：每次循环都执行data[type]= [];，这会把之前同类型的项全部覆盖掉，得先判断分组是否存在再初始化
• 属性名拼写错误：HTML里是data-seq，但你代码里写的是data-sequence，根本取不到对应值

修正后的jQuery代码 #

这里我用对象来存储分组，逻辑更清晰，也完全符合你要的结构：

$('.upBtn').on('click', function(){
  // 用对象存储分组，键是data-type的值，值是对应id的数据集
  var groupedData = {};
  
  $('#listDiv li').each(function() {
    const $li = $(this);
    // 用jQuery的data()方法获取data属性，比attr()更方便
    const id = $li.attr('id');
    const type = $li.data('type');
    const seq = $li.data('seq');
    const name = $li.data('name');
    
    // 如果当前type的分组还没创建，先初始化一个空对象
    if (!groupedData[type]) {
      groupedData[type] = {};
    }
    
    // 把当前li的数据存入对应分组下的id键中
    groupedData[type][id] = {
      type: type,
      seq: seq,
      name: name
    };
  });
  
  console.log(groupedData);
});

原生JavaScript版本（如果不想用jQuery） #

如果项目里没引入jQuery，用原生JS也能轻松实现：

document.querySelector('.upBtn').addEventListener('click', function() {
  const groupedData = {};
  const listItems = document.querySelectorAll('#listDiv li');
  
  listItems.forEach(li => {
    const id = li.id;
    // 用dataset属性获取data属性，原生JS的标准写法
    const type = li.dataset.type;
    const seq = li.dataset.seq;
    const name = li.dataset.name;
    
    if (!groupedData[type]) {
      groupedData[type] = {};
    }
    
    groupedData[type][id] = { type, seq, name };
  });
  
  console.log(groupedData);
});

为什么之前的push方法没用？ #

push()是给数组追加元素（按数字索引排序），但你要的是「按type分组，每个分组下按id存储数据」的键值对结构，这种场景下对象比数组更合适——对象允许你用字符串作为键，完美匹配data-type和id这类标识。

最终输出结构 #

运行修正后的代码，控制台会输出你预期的结构：

{
  "edit": {
    "id1": { "type": "edit", "seq": 1, "name": "name1" },
    "id2": { "type": "edit", "seq": 2, "name": "name2" }
  },
  "create": {
    "id3": { "type": "create", "seq": 3, "name": "name3" }
  }
}

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