Estoy tratando de cambiar cada etiqueta <th> con los valores de cadena almacenados en una matriz. Si llega al final de la longitud de la matriz, simplemente restablecerá el contador que ya he implementado. Quiero poder seguir repitiendo y cambiando cada uno de los valores del texto del encabezado hasta el final de la tabla. Probé varios intentos de código para poder cambiar y mostrar el texto del encabezado a continuación (pero ninguno funcionó; tampoco hay salidas de error de la consola):

 $(this).text() == headerTitleArr[headerIndex]; //$(this).text(headerTitleArr[headerIndex])[thIndex]; //$(this).css("content", headerTitleArr[headerIndex]);

Depuré el código para ver qué devolvían ambos valores y ambos devolvían valores de cadena, pero por alguna razón, los valores de la matriz headerTitleArr[headerIndex] no se pasan a $(this).text() que se supone que ser el selector DOM de tr.table tr > th y, por lo tanto, sigue siendo el mismo que se ve en la salida de console.log.

Aquí está mi jsfiddle del problema.

Fragmento de código:

 if (window.matchMedia('(max-width: 2799px)').matches) { // do functionality on screens smaller than 2799px var headerTitleArr = ["Players","Stamina","Home Runs"]; var headerTitleArrLength = 2; var mainChart = $("#chart1"); var headerIndexCount = 0; // loop thru each of the tr.table-tr rows tracked by index and change the th text's index with the header text value $("#chart1 tr.table-tr > th").each(function(thIndex) { headerIndex = headerIndexCount; // TO FIX $(this).text() == headerTitleArr[headerIndex]; //$(this).text(headerTitleArr[headerIndex])[thIndex]; //$(this).css("content", headerTitleArr[headerIndex]); headerIndexCount++; // if headerIndex equals to the length of the array, reset value if (headerIndex == headerTitleArrLength) { headerIndexCount = 0; // reset value } }); }