jQuery如何选取动态排序类名的前几个文本字段值并求和

核心思路 #

• 首先通过属性前缀选择器，拿到所有class以abc开头的输入框元素，排除其他无关元素
• 不能直接按DOM里的渲染顺序取元素，需要先把元素集合转成普通数组，提取每个元素类名后的数字后缀做数值排序，避免字符串排序把abc10排在abc2前面的问题
• 排序完成后截取前2个元素，读取输入值时做空值/非数字值兼容，统一转成数值后累加得到总和

示例DOM结构 #

<input type="text" class="abc5">
<input type="text" class="xyz5">

<input type="text" class="abc9">
<input type="text" class="xyz9">

<input type="text" class="abc4">
<input type="text" class="xyz4">

<input type="text" class="abc3">
<input type="text" class="abc10">
<input type="text" class="abc2">

完整实现代码 #

// 选取所有class以abc开头的输入框
const $abcInputList = $('input[class^="abc"]');

// 按类名后缀的数字做升序排序
const sortedList = $abcInputList.toArray().sort((prev, next) => {
  const prevNum = parseInt(prev.className.replace('abc', ''), 10);
  const nextNum = parseInt(next.className.replace('abc', ''), 10);
  return prevNum - nextNum;
});

// 取前2个值求和，非法输入默认按0计算
let total = 0;
sortedList.slice(0, 2).forEach(input => {
  const inputVal = parseFloat($(input).val()) || 0;
  total += inputVal;
});

// 最终得到的total就是所求的总和

效果说明 #

针对上面给出的示例DOM，排序后的abc类输入框顺序为abc2→abc3→abc4→abc5→abc9→abc10，取前2项也就是abc2、abc3的输入值做累加，完全符合类名动态排序的需求。

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