使用jQuery为仪表盘图标添加类未达预期，寻求解决方案

我来帮你搞定这个问题！你的现有代码存在一个关键问题：它只要检测到页面上任何一个带text-info类的小图标，就会给所有的.dashboard__icon.fa.fa-circle大图标添加text-info类，这就是为什么Book1的图标也会变蓝，而不是只Book2的。咱们需要精准定位到对应Book2的那个大图标才行。

问题分析 #

先看DOM结构的关联关系：

• 每本书的主信息行是.form-table__row，里面包含大圆形图标
• 主行下面跟着若干个额外行.form-table__row--extra，Book2的带text-info的小图标就在它自己的额外行里

所以我们的思路应该是：找到每个带text-info的小图标，然后定位到它对应的主行，再给主行里的大图标加类。

修正后的代码 #

$(document).ready(function(){
  // 遍历所有带有text-info类的小图标
  $('.dashboard__icon--small.fa.fa-circle.text-info').each(function(){
    // 找到当前小图标所在的额外行
    const $extraRow = $(this).closest('.form-table__row--extra');
    // 定位到这个额外行对应的主信息行
    const $mainRow = $extraRow.prevUntil('.form-table__row').prev();
    // 给主行里的大图标添加text-info类
    $mainRow.find('.dashboard__icon.fa.fa-circle').addClass('text-info');
  });
});

代码解释 #

• each()：遍历每个符合条件的小图标，确保每个小图标都能独立处理（以后有多个带标记的小图标也能适配）
• closest('.form-table__row--extra')：从当前小图标向上查找最近的额外行，比直接用parent()更健壮，能应对DOM结构的微调
• prevUntil('.form-table__row').prev()：prevUntil会找到额外行前面所有非主行的元素，再用prev()就能精准拿到对应的主信息行，不管主行下面有多少个额外行都能正确匹配
• find('.dashboard__icon.fa.fa-circle')：在主行内定位到大图标，添加text-info类实现变蓝效果

替代写法（可选） #

如果你的额外行一定是紧跟在对应主行后面，也可以用更简洁的写法：

$(document).ready(function(){
  $('.dashboard__icon--small.fa.fa-circle.text-info').each(function(){
    const $mainRow = $(this).closest('.form-table__row--extra').prevAll('.form-table__row').first();
    $mainRow.find('.dashboard__icon.fa.fa-circle').addClass('text-info');
  });
});

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