为含特定值的last_value_row元素添加CSS类仅首个生效问题求助

需要实现以下逻辑：当class为last_value_row的<tr>元素的第一个<td>内容为“New Target”时，为该<tr>添加new_target_color类并移除target_background_color类；若内容不是“New Target”，则执行相反操作。但目前仅首个符合条件的元素能成功切换类，其余符合条件的元素无法生效。

HTML代码 #

<table id="epoch_forms_table" class="epoch_forms_table">
   <tr class="title_row">
      <th>{% autoescape off %}{% trans "Target name" %}{% endautoescape %}</th>
      ...
      <th class="last"></th>
   </tr>
   <tr class="value_row{% if epoch_form.errors %} error{% endif %}">
      <td></td>
      <td><label><input type="number" size="13" step="0.001"></label></td>
      <td class="{{ key }}_unit unit" id="{{ key }}">{{ value }}</td>
      <td><a href="#" class="button icon remove remove_row_button danger"></a></td>
   </tr>
   <tr id="last_value_row" class="last_value_row target_background_color">
      <td></td>
      <td></td>
      <td class="{{ key }}_unit unit" id="{{ key }}">{{ value }}</td>
      <td></td>
   </tr>
   <tr class="error_row">
      {% for field in epoch_form %}
         <td>{{ field.errors }}</td>
      {% endfor %}
      <td></td>
   </tr>
</table>

现有JavaScript代码 #

var new_target_element = document.getElementById("last_value_row");
var last_values = [];
var index = $("#epoch_forms_table tr.value_row").index(value_row);


...
for (let i = 0; i < el.length; i++) {
   for (let i = 0, cell; cell = new_target_element.cells[i]; i++) {
      if ($(this).find("td:contains('New target')")) {
         new_target_element.classList.add("new_target_color");
         new_target_element.classList.remove("target_background_color");
      } else {
         new_target_element.classList.add("target_background_color");
         new_target_element.classList.remove("new_target_color");
      }
   }
}
 if (last_values[index].length === 0) {
            last_value_row.find("td:first").html("New target");
        } else {
...
}
}

问题分析与解决方案 #

问题根源 #

1. 单个元素限制：document.getElementById只能获取唯一ID对应的元素，无法处理多个last_value_row类的元素。
2. 循环变量冲突：嵌套循环使用了相同的变量i，导致逻辑混乱。
3. 判断逻辑错误：$(this)指向不明确，且contains匹配的文本大小写与实际内容（"New Target"）不一致。

修正后的代码 #

原生JavaScript版本

// 获取所有class为last_value_row的tr元素
const lastValueRows = document.querySelectorAll('.last_value_row');

// 遍历每个目标行
lastValueRows.forEach(row => {
    // 获取第一个td的文本并去除首尾空格
    const firstTdText = row.querySelector('td:first-child').textContent.trim();
    const isNewTarget = firstTdText === 'New Target';

    // 切换类名
    if (isNewTarget) {
        row.classList.add('new_target_color');
        row.classList.remove('target_background_color');
    } else {
        row.classList.add('target_background_color');
        row.classList.remove('new_target_color');
    }
});

jQuery版本

// 遍历所有class为last_value_row的tr元素
$('.last_value_row').each(function() {
    // 获取第一个td的文本并去除首尾空格
    const firstTdText = $(this).find('td:first').text().trim();
    const isNewTarget = firstTdText === 'New Target';

    // 切换类名
    if (isNewTarget) {
        $(this).addClass('new_target_color').removeClass('target_background_color');
    } else {
        $(this).addClass('target_background_color').removeClass('new_target_color');
    }
});

关键优化点 #

• 使用类选择器获取所有目标元素，而非单个ID元素。
• 遍历每个元素单独处理，确保所有符合条件的行都能生效。
• 修正文本匹配的大小写问题，保证判断逻辑准确。
• 用forEach/each替代嵌套循环，代码更简洁易读。

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