如何为所有含指定文本的按钮添加类？现有代码仅生效单个按钮

原代码里用querySelector只会选中第一个匹配的按钮，所以只能处理单个元素。想要批量处理所有目标按钮，你可以用querySelectorAll搭配forEach遍历，或者利用你已经引入的jQuery来实现，两种方案如下：

原生JavaScript方案 #

// 等待DOM加载完成再执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有带.btn-with-text类的按钮
  const buttons = document.querySelectorAll('.btn-with-text');

  // 遍历每个按钮逐一检查
  buttons.forEach(button => {
    // 去除文本前后空格后判断是否匹配目标文本
    if (button.innerText.trim() === 'MY Custom Text') {
      button.classList.add('btn-extra-class');
    }
  });
});

jQuery方案（已引入jQuery的情况下更简洁） #

$(document).ready(function() {
  // 筛选出文本匹配的按钮，批量添加类
  $('.btn-with-text').filter(function() {
    return $(this).text().trim() === 'MY Custom Text';
  }).addClass('btn-extra-class');
});

额外提示 #

如果需要忽略文本大小写匹配，可以把文本统一转成小写后比较：

// 原生JS示例
if (button.innerText.trim().toLowerCase() === 'my custom text'.toLowerCase()) {
  // 添加类逻辑
}

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