使用jQuery隐藏不含指定class的div元素

先明确下：你要保留的是那个不含.unique类span的第二个div，隐藏其余三个包含.unique的div，核心是选中所有包含.unique的子div，然后隐藏它们。

用jQuery的:has()选择器就能轻松实现，结合父容器的直接子元素选择器精准定位：

// 隐藏所有包含 .unique 类span的子div
$('#my_unique_div > div:has(.unique)').hide();

如果想用原生CSS属性设置的写法，也可以这样：

$('#my_unique_div > div:has(.unique)').css('display', 'none');

为什么这么写？ #

• #my_unique_div > div：只找id="my_unique_div"下的直接子div，不会误选嵌套更深的div
• :has(.unique)：筛选出内部包含.unique类元素的那些子div
• .hide()是jQuery封装的快捷方法，效果和设置display: none完全一致

要是你确实想实现“隐藏所有不包含.unique的div”（和你要的最终结果相反），可以用:not()组合:has()：

$('#my_unique_div > div:not(:has(.unique))').hide();

但根据你说的“仅保留第二个div可见”的需求，第一种写法才是正确的。

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