jquery - 如何只在img src存在的情况下显示div？

Question

<a class="thumbnail-link" href="">
<div id="thumbnail-wrap" class="thumbnail-wrap">
<img width="600" height="360" src="image.jpg">
</div>
</a>

如果有图片，如何显示缩略图链接 div？

相反的解决方案是...

<script type="text/javascript">

jQuery(document).ready(function( $ ) {

    $(".thumb-summary").find("img[src='']").parent().hide();

});
</script>

但是，它在页面加载时可见，它隐藏了没有图像的 div，看起来很糟糕。我想让它只在找到图像时显示图像，请使用 jquery 方式。

Answer 1

最初使用 CSS 隐藏所有 .thumbnail-wrap 的父元素然后显示具有属性值的元素，使用 :not() pseudo-class selector忽略所有 src 为空的 img 标签。

CSS:

.thumb-summary .thumbnail-wrap{
   display:none;
}

JQUERY :

jQuery(document).ready(function( $ ) {
    $(".thumb-summary").find("img:not([src=''])").parent().show();
    // or 
    //  $(".thumb-summary .thumbnail-wrap:has(img:not([src='']))").show();
});

---

仅供引用:如果您有权访问后端代码，则根据 src 向父元素添加一些类，并向该特定类添加样式(用于隐藏)。