页面加载时遍历元素检测特定class的jQuery代码问题求助

问题排查 #

你代码里的核心问题有2个：

• 循环内用$(".card")选择器会全局匹配所有card元素，不会对应当前正在遍历的单个card
• hasClass()是判断元素自身是否携带对应类名，你需要的是判断当前card的子元素是否存在card-header类，应该先查找子元素再判断匹配结果

修复后的代码 #

$(document).ready(function () {
    $(".parent .card").each(function () {
        // 查找当前card下是否存在class为card-header的子元素
        if ($(this).find(".card-header").length > 0) {
            $(this).css("background", "red");
        }
    });
});

实现说明 #

• 用$(this)指代当前遍历到的单个card元素
• 用find(".card-header")查找当前card的所有后代元素中带有card-header类的元素
• 判断返回的jQuery对象长度是否大于0，大于0说明存在匹配的子元素，就给当前card设置红色背景

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