jquery - 隐藏包含损坏图像的 div

Question

所以我正在开发一个博客/网站，其中有一个图像轮播，其中有 8 个图像点。我正在将 Owl Carousel 与 CouchCMS 一起使用(这应该不会太重要)..

这是轮播的样子:

<div id="owl-demo" class="owl-carousel">
     <div class="item"><img src="<cms:show blog_image />" class="carousel_image"></div>
     <div class="item"><img src="<cms:show image_2 />"></div>
     <div class="item"><img src="<cms:show image_3 />"></div>
     <div class="item"><img src="<cms:show image_4 />"></div>
     <div class="item"><img src="<cms:show image_5 />"></div>
     <div class="item"><img src="<cms:show image_6 />"></div>
     <div class="item"><img src="<cms:show image_7 />"></div>
     <div class="item"><img src="<cms:show image_8 />"></div>
</div>

现在我有了它，您可以使用 CouchCMS 上传最多 8 张图像。

如果您上传的图片少于 8 张，其余的将仅显示为损坏的图片。

现在我正在使用以下代码来隐藏损坏的图像，这当然会留下一个空白的 div(但这仍然比显示损坏的图像更好)...这是我能想到的最好的解决方案与。

$("img").error(function(){
   $(this).hide();
});

有谁知道我可以检测图像是否损坏并隐藏包含该图像的整个 div 的方法吗？

谢谢。

下面是我尝试过的示例，但没有成功。

html

<div class="item" id="img-8-div"><img src="<cms:show image_8 />"></div>

这是 JQuery，它再次不起作用。

$("#img-8-div").children('img').error(function(){
   $(this).hide();
});

Answer 1

Demo Fiddle

使用 jQuery parent()

$("img").error(function(){
   $(this).parent().hide();
});