如何使用jQuery传递元素数组同时保留data属性？

嗨，我来帮你搞定这个需求！你想要的效果完全可以通过jQuery的.map()方法实现，它就是专门用来把jQuery元素集合转换成我们需要的数组结构的。

直接上代码，这就是你要的实现：

$('body').on('click', '.getItems', function() {
  // 遍历所有.selectItem，提取指定data属性并生成数组
  const itemsArray = $('.selectItem').map(function() {
    // 对每个元素，返回封装好的属性对象
    return {
      hash: $(this).data("hash"),
      id: $(this).data("id"),
      inspect: $(this).data("inspect"),
      stickers: $(this).data("stickers")
    };
  }).get(); // 关键一步：把jQuery对象转为原生JS数组

  // 现在你就可以用这个数组做任何操作了，比如打印看看结果
  console.log(itemsArray);
});

关键细节解释： #

• .map()方法会逐个遍历选中的.selectItem元素，每遍历一个就执行一次回调函数，我们在回调里返回需要的属性对象
• 必须调用.get()方法，因为.map()返回的是一个jQuery包装后的对象，.get()能把它转换成标准的JavaScript数组，这样你就能像操作普通数组一样使用它了

如果你想要更灵活的写法——比如自动获取元素所有的data属性（不用手动指定每个key），可以直接用$(this).data()，它会返回包含该元素所有data属性的对象：

$('body').on('click', '.getItems', function() {
  const itemsArray = $('.selectItem').map(function() {
    return $(this).data(); // 直接获取所有data属性
  }).get();

  console.log(itemsArray);
});

这样后续如果给.selectItem加了新的data属性，代码不用修改就能自动包含进去，非常方便。

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