如何使用jQuery正确获取并修改数组存储的对应表格th标签文本值？

问题原因 #

• 核心错误是误用了比较运算符：$(this).text() == headerTitleArr[headerIndex]里的==是判断相等的比较运算符，不会执行赋值操作。jQuery的text()方法规则是：不传参数时读取元素文本内容，传入要设置的文本作为参数时，才会修改元素的文本值，你当前的写法只是做了一次无意义的相等判断，自然不会修改页面内容。
• 另外两个注释的写法本身也存在逻辑错误：
  • $(this).text(headerTitleArr[headerIndex])[thIndex]：text()方法执行后返回的是jQuery对象，加[thIndex]是将jQuery对象转为对应下标的原生DOM元素，此处完全多余，属于无效代码。
  • $(this).css("content", headerTitleArr[headerIndex])：CSS的content属性仅对::before/::after伪元素生效，直接给普通th元素设置该属性不会在页面上渲染对应内容。
• 额外逻辑问题：你手动写死headerTitleArrLength = 2，但你的数组实际有3个元素，正确的长度应该取headerTitleArr.length，否则会导致最后一个数组元素永远不会被用到，提前重置计数器。

修复方案 #

直接将赋值行替换为正确的text()设置写法即可，同时修正数组长度的取值逻辑，优化后的完整代码如下：

if (window.matchMedia('(max-width: 2799px)').matches) {
  var headerTitleArr = ["Players","Stamina","Home Runs"];
  var headerIndexCount = 0;
  $("#chart1 tr.table-tr > th").each(function(thIndex) {
    // 正确的文本赋值写法
    $(this).text(headerTitleArr[headerIndexCount]);
    headerIndexCount++;
    // 直接取数组实际长度做判断，不用手动写死
    if (headerIndexCount === headerTitleArr.length) {
      headerIndexCount = 0;
    }
  });
}

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