如何使用JavaScript/jQuery对页面元素文本值求和？已尝试reduce等方法失败

API 探路者

2026-8-8

解决方案：使用纯JavaScript或jQuery实现文本值求和

当然可以实现，你之前失败的原因大概率是未将文本字符串转换为数字类型（直接相加会变成字符串拼接），另外jQuery本身没有内置的sum()方法，误用会导致失效。下面是两种可行的实现方案：

纯JavaScript实现

方式1：forEach遍历累加

// 获取目标元素
const targetElements = document.querySelectorAll('#val_1, #val_2, #val_3');
let total = 0;

// 遍历元素，转数字后累加
targetElements.forEach(el => {
  // 去除文本空格，转浮点数，非数字值按0处理
  const num = parseFloat(el.textContent.trim()) || 0;
  total += num;
});

// 将结果填充到#result元素
document.getElementById('result').textContent = total;

方式2：使用reduce方法

const targetElements = Array.from(document.querySelectorAll('#val_1, #val_2, #val_3'));
const total = targetElements.reduce((sum, el) => {
  const num = parseFloat(el.textContent.trim()) || 0;
  return sum + num;
}, 0);

document.getElementById('result').textContent = total;

jQuery实现

方式1：each遍历累加

let total = 0;

// 遍历选中的元素
$("#val_1, #val_2, #val_3").each(function() {
  const num = parseFloat($(this).text().trim()) || 0;
  total += num;
});

// 填充结果
$("#result").text(total);

方式2：map + reduce组合

// 把元素文本转成数字数组，再求和
const numArray = $("#val_1, #val_2, #val_3").map(function() {
  return parseFloat($(this).text().trim()) || 0;
}).get(); // 将jQuery对象转为普通数组

const total = numArray.reduce((sum, num) => sum + num, 0);
$("#result").text(total);