Javascript 隐藏所有不存在的元素'；没有一个特定的类嵌套在它们的深处

，约有70个元素，全部为“卡片”类

大约70个元素中的一些元素包含另一个类为“pro-content”的元素，该类元素嵌套在它们的内部

---

我的目标是隐藏这个“专业内容”类的所有元素，并保留所有其他没有它的元素

鉴于带有“pro content”的元素是childNodes，我尝试将以下内容用于…of循环：

let cardoo = document.querySelectorAll(".card");

for ( const element of cardoo ) {
    if ( !$(element).hasClass('pro-content') ) {
        element.style.display = "none";
    }
}

然而，这段代码不能正常工作——它删除了所有元素，而只是删除了没有“pro content”类的元素

---

注意：我会提供一个纯标准的ES16解决方案，特别是为了实践更多的ES16 DOMapi关系，但如果没有其他选择，我会使用纯jQuery/ES16 jQuery解决方案。

这应该可以做到

$('.card').each((i, el) => {
    if ($(el).find('.pro-content').length) {
        $(el).hide();
    }
})

使用jQuery

如果使用jQuery的

：has（）

选择器，则不需要显式循环

$(".card:has('.pro-content')").hide();

这将选择所有

。卡片

元素具有

pro content

类的子元素

---

不带jQuery

要在没有库依赖项的情况下执行此操作，请使用querySelector/All

for (const card of document.querySelectorAll(".card")) {
  if (!card.querySelector(".pro-content")) {
    card.style.display = "none";
  }
}

---

或者，如果您愿意，也可以使用本机的

.closest（）

方法，如下所示：

for (const pro of document.querySelectorAll(".pro-content")) {
  const card = pro.closest(".card");
  if (card) {
    card.style.display = "none";
  }
}

---

尽管您需要将

.closest（）

修补到一些尚未安装它的浏览器中。

下面的代码片段应该可以解决您的问题。在本例中，有效卡（即具有pro内容）变为红色，无效卡变为蓝色。您可以根据自己的意愿调整hit和not hit类（即“显示：无”或“显示：阻止”），希望这能解决您的问题

如果您有任何问题，请在评论中询问

（函数（$）{
设cardoo=$（“.card”）
cardoo.each（函数（）{
if（$（this）.find（'.pro content'）.length！==0）{
$（this.addClass（“hit”）；
}否则{
$（this.addClass（“未命中”）；
}
});
})（jQuery）；

.card{
背景：黑色；
颜色：白色；
保证金：5px；
}
.击中{
背景：红色；
}
.没有击中{
背景：蓝色；
}

x
x
x
赞成的意见
x
x
x
赞成的意见
赞成的意见
x

在查看源代码后，我认为这一行程序可以胜任：

document.querySelectorAll('.pro-content').forEach(el => el.parentNode.parentNode.style.display='none');

---

请制作一个代码片段（

），这样我们就可以尝试

！$（元素）。hasClass（'pro-content'）

可以在网页上尝试任何活动。我插入了链接，而不是制作一个代码片段（如果你想编写代码片段）.Haim，抱歉，复制了一个旧的示例。我已经尝试过了。不起作用。它删除了所有元素，而只删除了没有pro content元素的元素。Haim，问题已编辑。您好！您理解正确！它起作用了！谢谢！我没有测试第二个变体-但是这个querySelector在源代码上不起作用，因为类或未分配的类不起作用o相同的元素。@FrankWisniewski:非jQuery可以工作，但我不小心在条件中放入了一个

！

。现在它已被修复。

querySelector

的使用是正确的，因为它将查找嵌套在当前

卡
中的
pro-content
元素，然后隐藏当前
卡
。好的，but
最近的
是jQuery？。这行得通，但应该添加一个负号（！）（它都没有“pro内容”类。一些浏览器将
.forEach
添加到HTMLCollection中，而其他浏览器则不添加。您需要添加一个补丁，以确保跨浏览器安全。它还假设页面上没有
pro内容
，而这些内容在
.card
中没有完全嵌套两个级别。应该进行一些验证。