JQuery - 隱藏始終具有相同類的父 div，如果它包含另一個 div 和另一個包含 2017 的重復自身的類

Question

我有一個包含多個 div 的頁面，如下所示：

`<div class="mod-tile">
Bla bla zbing
<div>Lorem Ipsum</div>
<time class="date">Crocodile Dundee 2016</time>
<div class="date">Lorem lorena 2017</div>
</div>

<div class="mod-tile">
Bla bla zbing
<div>Lorem Ipsum</div>
<time class="date">John Humdee 2016</time>
<div class="date">Izabelle Adjani 2018</div>
</div>

<div class="mod-tile">
Bla bla zbing
<div>Lorem Ipsum</div>
<time class="date">Rabbit wabbit 2017</time>
<div class="date">Bam boom 2020</div>
</div>`

如果類“date”的子 div 包含 2017 作為文本，如何使用 JQuery 隱藏父“mod-tile”div？ 只有包含它的“mod-tile”div，而不是所有其他“mod-tile”div。

我有限的知識嘗試：

$("div:hasClass("mod-tile"):has(div:hasClass("date"):contains("2017")).hide()")

謝謝

編輯：所以上述 div 的解決方案是，作為先生。 保羅 T 說：

$(".mod-tile > div.date:contains('2017')").parent().hide();

如果“日期”div 嵌套在另一個 div 中，我們仍然需要隱藏祖父“mod-tile”會發生什么？

<div class="mod-tile">
Bla bla zbing
<div>Lorem Ipsum</div>
<div class="wabbit">
    <time class="date">Crocodile Dundee 2016</time>
    <div class="date">Lorem lorena 2017</div>
</div>
</div>

第二個示例的解決方案，基於 Paul 的代碼並使用 Rory 的建議：

$(".mod-tile").has("div.date:contains('2016')").hide();

謝謝

Answer 1

您可以將>選擇器用於在父級中具有date類的子div ，然后隱藏父級：

 // Find child div.date elements that contains the data and then hide the parent. $(".mod-tile > div.date:contains('2017')").parent().hide();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="mod-tile"> Bla bla zbing <div>Lorem Ipsum</div> <time class="date">Crocodile Dundee 2016</time> <div class="date">Lorem lorena 2017</div> </div> <br> <div class="mod-tile"> Bla bla zbing <div>Lorem Ipsum</div> <time class="date">John Humdee 2016</time> <div class="date">Izabelle Adjani 2018</div> </div> <br> <div class="mod-tile"> Bla bla zbing <div>Lorem Ipsum</div> <time class="date">Rabbit wabbit 2017</time> <div class="date">Bam boom 2020</div> </div>

更新：

看到你的第二個例子讓我意識到has()也可以以同樣的方式與第一個例子一起使用，並且不需要調用parent() 。 我以前從未使用過has() ，所以我也學到了一些新東西！

 // Find child div.date elements that contains the data to hide the parent. $('.mod-tile').has("div.date:contains('2017')").hide();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="mod-tile"> Bla bla zbing <div>Lorem Ipsum</div> <time class="date">Crocodile Dundee 2016</time> <div class="date">Lorem lorena 2017</div> </div> <br> <div class="mod-tile"> Bla bla zbing <div>Lorem Ipsum</div> <time class="date">John Humdee 2016</time> <div class="date">Izabelle Adjani 2018</div> </div> <br> <div class="mod-tile"> Bla bla zbing <div>Lorem Ipsum</div> <time class="date">Rabbit wabbit 2017</time> <div class="date">Bam boom 2020</div> </div>