使用jQuery筛选无<img>的.coverimages元素并隐藏时出错求助

嘿，我一眼就发现问题所在啦！

你的代码之所以会把所有.coverimages元素都隐藏（包括那些带图片的），核心问题出在选择器的作用范围上：

在each循环的回调里，你写的$(".coverimages img")是在整个页面里全局查找所有带.coverimages类的元素下的<img>标签，而不是针对当前正在遍历的那一个.coverimages元素。

举个例子：如果你的页面里哪怕只有一个.coverimages包含图片，那$(".coverimages img").length就会大于0，这时候所有循环里的if条件都不成立，不会隐藏任何元素；但如果页面里完全没有.coverimages包含图片，这个长度就是0，所有.coverimages就都会被隐藏——这就是你遇到的情况（说不定你以为有的div带图片，但实际结构没匹配上？）。

修正后的代码 #

你需要在循环里用$(this)指代当前遍历的那个.coverimages元素，然后用.find()只查找它内部的图片：

$('.coverimages').each(function() {
  // 只找当前这个 .coverimages 里的 img
  if ($(this).find("img").length == 0) {
    $(this).hide();
  }
});

更简洁的写法（推荐） #

其实jQuery可以不用手动写each循环，直接用过滤方法一步搞定，既简洁又不容易出错：

方法一：用filter过滤

$('.coverimages').filter(function() {
  return $(this).find('img').length === 0;
}).hide();

方法二：用:not(:has())选择器

$('.coverimages:not(:has(img))').hide();

这两种写法都能精准找到内部没有<img>标签的.coverimages元素，然后直接隐藏它们~

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