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>`

如果具有“日期”类的子 div 包含 2017 作为文本，我如何使用 JQuery 隐藏父“mod-tile”div？只有包含它的“mod-tile”div，而不是所有其他“mod-tile”div。

我有限的知识尝试：

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

谢谢

编辑： 因此，上述 div 的解决方案是，作为先生。 Paul 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

您可以将> 选择器用于子div 在父级中具有date 类，然后隐藏父级：

// 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>