Question

In this very webpage，有大约70个元素，所有这些都与班级＆＃34;卡＆＃34;。

大约70个元素中的一些元素拥有另一个元素＆＃34; pro-content＆＃34;，其中嵌套深入其中。

In this image you could see 2 elements. One with the "pro-content" class and an one without, from left to right.

我的目标是隐藏所有元素＆＃34; pro-content＆＃34;上课并保留所有其他没有的东西。

考虑到＆＃34; pro-content＆＃34;是childNodes，我试图将以下内容用于循环：

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

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

然而，这段代码并没有正常工作 - 它删除了所有元素，而不是那些没有＆＃34; pro-content＆＃34;类。

注意：我会提供纯粹的vanilla ES16解决方案，特别是练习更多的ES16-DOMapi关系，但如果没有其他选择，我会使用纯jQuery / ES16-jQuery解决方案。

Answer 1

在查看源代码后，我认为这个oneliner可以完成这项任务：

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

Answer 2

这应该可以解决问题。

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

Answer 3

使用jQuery

如果您使用jQuery的:has()选择器，则不需要显式循环。

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

这将选择所有.card元素具有后代和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()修补到某些尚未拥有它的浏览器中。

Answer 4

以下代码段可以解决您的问题。在此示例中，有效卡（即具有专业内容）变为红色，而无效则变为蓝色。您可以根据自己的意愿调整命中和未命中的类（即“display：none”或“display：block”。希望这可以解决您的问题。

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

(function($) {
  let cardoo = $('.card')

  cardoo.each(function() {
  	if($(this).find('.pro-content').length !== 0) {
  		$(this).addClass("hit");
     } else {
     $(this).addClass("not-hit");
     }
  });
	
})( jQuery );

.card {
  background: black;
  color: white;
  margin: 5px;
}

.hit {
  background:red;
}

.not-hit {
  background:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card"><div class="depeer-we-go"><div class="other_content">x</div></div></div>
<div class="card"><div class="depeer-we-go"><div class="other_content">x</div></div></div>
<div class="card"><div class="depeer-we-go"><div class="other_content">x</div></div></div>
<div class="card"><div class="depeer-we-go"><div class="pro-content">PRO</div></div></div>
<div class="card"><div class="depeer-we-go"><div class="other_content">x</div></div></div>
<div class="card"><div class="depeer-we-go"><div class="other_content">x</div></div></div>
<div class="card"><div class="depeer-we-go"><div class="other_content">x</div></div></div>
<div class="card"><div class="depeer-we-go"><div class="pro-content">PRO</div></div></div>
<div>
<div class="card"><div class="depeer-we-go"><div class="pro-content">PRO</div></div></div>
<div class="card"><div class="depeer-we-go"><div class="other_content">x</div></div></div>

隐藏所有没有特定类的元素嵌套在其中

4 个答案: