如何为含指定class节点的父元素添加新class？代码调试求助

原代码错误分析 #

第一段代码问题 #

• $(".row").hasClass("lock-icon")：hasClass()仅检查当前元素自身是否拥有指定class，而.lock-icon是.row的后代元素，不是.row本身的class，因此判断永远为false。
• $(".row .lock-icon").parent(".content-box")：.lock-icon的直接父元素是.col，不是.content-box，parent()只会查找直接父节点，无法跨层级找到祖先节点。

第二段代码问题 #

• $('.content-box').hasClass('lock-icon')：同样错误，.content-box自身没有lock-icon class，hasClass()返回布尔值false，而非jQuery对象。
• $($locked).each(...)：将布尔值转为jQuery对象，遍历逻辑完全无效。

正确解决方案 #

我们需要找到所有包含.lock-icon后代元素的.content-box，然后为它们添加locked-badge class，以下两种方式都可以实现：

方法1：使用closest()定位祖先节点 #

$(document).ready(function() {
  // 找到所有.lock-icon元素，向上查找最近的.content-box祖先节点
  $(".lock-icon").closest(".content-box").addClass('locked-badge');
});

逻辑说明：

1. 先定位页面中所有.lock-icon元素；
2. 通过closest(".content-box")跨层级向上查找最近的目标祖先节点；
3. 直接为这些节点添加locked-badge class。

方法2：使用:has()筛选选择器 #

$(document).ready(function() {
  // 直接选择所有包含.lock-icon后代的.content-box元素
  $(".content-box:has(.lock-icon)").addClass('locked-badge');
});

逻辑说明：

• :has()是jQuery的筛选选择器，直接匹配包含指定后代元素的父节点，一步完成选择与class添加操作。

效果验证 #

添加上述任意一段代码后，页面中包含.lock-icon的.content-box会被加上locked-badge class，对应CSS设置的透明度降低、鼠标禁用样式会生效。

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