在jQuery中通过索引为表格指定行添加自定义类的技术求助

作为JS和jQuery新手，我正在处理一个多列HTML表格，除最后一列是文本外，其余列都是数字。我需要实现两个操作：

• 为最后一列中内容等于"Camp"的所有元素添加custom-sortable类
• 为这些元素所在整行的所有元素也添加该类

补充说明：添加类的目的是把内容为"Camp"的元素所在行的背景设为灰色。

现有代码 #

目前我已经实现了为最后一列的目标元素添加类的功能，代码如下：

.custom-sortable .rank-list-item.rank-list-item-Camp {
    background-color: grey;
}

$(document).ready(function() {
    var targetIndex = -1;
    $('.custom-sortable .rank-list-item').each(function(index) {
        if ($(this).text() === 'Camp') {
            targetIndex = index;
            $(this).addClass('custom-sortable rank-list-item-Camp');
        }
    });
    if (targetIndex >= 0) {
        $('.custom-sortable .rank-list-item').eq(targetIndex).addClass('custom-sortable');
    }
});

当前效果与期望效果 #

• 当前效果：只有最后一列中内容为"Camp"的单元格背景变成灰色，整行其他单元格无变化
• 期望效果：内容为"Camp"的单元格所在的整行所有单元格背景都变成灰色

解决方案 #

核心是找到目标单元格的父行，给整行内的所有元素统一加类，以下是优化后的实现：

方案一：保留原有类逻辑 #

/* 控制整行单元格的背景色 */
.rank-list-item-Camp-row .rank-list-item {
    background-color: grey;
}

$(document).ready(function() {
    // 精准筛选最后一列文本严格等于"Camp"的元素（trim避免空格干扰）
    $('.custom-sortable .rank-list-item').filter(function() {
        return $(this).text().trim() === 'Camp';
    }).each(function() {
        // 给目标单元格添加原有类
        $(this).addClass('custom-sortable rank-list-item-Camp');
        // 找到所在行，给行内所有单元格添加统一类
        $(this).closest('tr').find('.rank-list-item').addClass('rank-list-item-Camp-row');
    });
});

方案二：简化逻辑（仅实现整行变灰） #

如果不需要单独给目标单元格加额外类，可以更简洁：

.camp-row .rank-list-item {
    background-color: grey;
}

$(document).ready(function() {
    $('.custom-sortable .rank-list-item').each(function() {
        if ($(this).text().trim() === 'Camp') {
            // 直接给所在行添加类，控制整行样式
            $(this).closest('tr').addClass('camp-row');
        }
    });
});

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