JQuery条件执行异常：.long-ribbon类被误移除问题排查

API 探路者

2026-8-15

问题解决：为指定条件的.sports ribbon添加.long-ribbon类

问题分析

原代码遍历所有.ribbon元素时，使用全局选择器判断是否存在.claimed，没有限定在当前元素所在的容器内，导致跨容器判断错误
满足条件时给.claimed的所有兄弟元素添加类，不符合仅给.sports元素添加的需求
else分支会在遍历到文本长度不足的元素时，错误移除已添加的.long-ribbon类

修正后的代码

HTML（无需修改）

<div class="block ribbons">
  <span class="ribbon claimed">CLAIMED</span>
  <span class="ribbon sports">XXXXXXX XXXXXXX</span>
  <span class="ribbon games">XX</span>
</div>

<div class="block ribbons">
  <span class="ribbon basketball">XXXX</span>
  <span class="ribbon soccer">XXXXXXX XXXXXXX</span>
</div>

jQuery代码

jQuery(document).ready(function ($) {
  // 遍历每个包含.claimed的ribbons容器
  $(".ribbons:has(.claimed)").each(function () {
    const $sportsRibbon = $(this).find(".ribbon.sports");
    // 检查sports ribbon的文本长度是否≥10
    if ($sportsRibbon.text().length >= 10) {
      $sportsRibbon.addClass("long-ribbon");
    }
  });
});