如何用jQuery为含有效src的指定类图片的父元素添加类？

我来帮你看看问题出在哪~你的思路方向是对的，但核心逻辑有个小错误：$('.si-innerWrap').hasClass('disc-image')是在检查.si-innerWrap自身有没有disc-image类，而不是判断它的子元素里是否存在这个类的有效图片。咱们调整下逻辑，不用先移除空src的图片也能精准实现需求，当然如果你确实需要移除空图，也可以保留这一步。

优化后的代码 #

HTML #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="si-innerWrap">
    <img class="disc-image" src="https://www.w3schools.com/html/pulpitrock.jpg">
</div>
<div class="si-innerWrap">
    <img class="disc-image" src="">
</div>
<div class="si-innerWrap">
    <img class="disc-image" src="https://www.w3schools.com/html/pulpitrock.jpg">
</div>
<div class="si-innerWrap">
    <img class="disc-image" src="">
</div>

CSS #

.si-innerWrap {
    border: 10px solid black;
    margin: 10px;
    text-align: center;
}
.has-img {
    border: 10px solid red;
}

jQuery（推荐方案，无需移除空图） #

// 直接筛选：包含 .disc-image 类且 src 不为空的图片的父元素
$('.si-innerWrap').has('.disc-image[src!=""]').addClass('has-img');

可选方案（保留移除空图的操作） #

如果你还是想先移除空src的图片，也可以这么写，效果一样：

// 先移除所有src为空的目标图片
$('.disc-image[src=""]').remove();
// 再筛选还有 .disc-image 子元素的父元素（此时剩下的都是有效图）
$('.si-innerWrap').has('.disc-image').addClass('has-img');

逻辑说明 #

• 第一种方案用has()方法直接匹配符合条件的父元素，不需要修改DOM结构，更高效；
• 第二种方案先清理无效图，再判断父元素是否还有剩余的目标图片，逻辑更直观，适合需要移除空图的场景。

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