使用jQuery与ES6获取同data属性select最大属性值遇类型错误

我看你在尝试获取相同data-questionid的select元素中最大的responsegroupnumber值时，碰到了TypeError: undefined is not a function的错误，想要最终在控制台输出目标值3对吧？

错误原因分析 #

你原来的写法直接把jQuery选择器返回的DOM元素集合展开传给Math.max，但Math.max需要的是数值类型参数，而非DOM元素。另外，jQuery选择结果是类数组的jQuery对象，直接展开后每个元素是DOM节点，根本不是你要的属性值；如果没把jQuery的映射结果转成普通数组，也会导致Math.max无法正确处理。

正确代码示例 #

下面是调整后的代码，能正确输出你想要的最大值：

$(document).ready(function() {
  let question = { Id: 1 };
  // 1. 选中所有符合data-questionid条件的select元素
  // 2. 提取每个元素的responsegroupnumber属性并转成整数
  // 3. 把jQuery对象转成普通数组
  let responseGroupValues = $(`select[data-questionid="${question.Id}"]`)
    .map(function() {
      // 自定义属性用attr获取，同时转成数字避免字符串比较问题
      return parseInt($(this).attr('responsegroupnumber'), 10);
    })
    .get();
  
  // 用展开运算符把数组传给Math.max，获取最大值
  let maxResponseGroupNumber = Math.max(...responseGroupValues);
  console.log(maxResponseGroupNumber); // 输出3
});

关键注意点 #

• 用map()遍历每个select，提取responsegroupnumber属性值时，一定要用parseInt转成数字（否则字符串比较会出问题，比如"10"会被判定为比"3"小）。
• 调用get()方法把jQuery的映射结果转成普通JavaScript数组，这样才能用展开运算符...传给Math.max。
• 建议给自定义属性加上data-前缀（比如data-responsegroupnumber），更符合HTML规范，获取时可以用$(this).data('responsegroupnumber')，会自动转成对应类型。

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