显示具有特定CSS类

Question

我有2个隐藏的DIV
每个DIV都包含一个SPAN
我想只显示具有类RedBackground的SPAN的DIV
我写的javascript代码无效

＆＃13;

＆＃13;

$("div span.RedBackground").show();

＆＃13;

.greenBackground {
    color: green;
}

.RedBackground {
    color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="display: none;">
<span  class="RedBackground">show this</span>
</div>

<div style="display: none;">
<span  class="GreenBackground">NOT show this</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用:has selector获取包含此类元素的所有div。不需要使用parent或closest：

之类的内容

$("div:has(span.RedBackground)").show();

.greenBackground { color: green; }
.RedBackground { color: red; }

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="display: none;">
  <span  class="RedBackground">show this</span>
</div>

<div style="display: none;">
  <span  class="GreenBackground">NOT show this</span>
</div>

Answer 2

1. 选择器是另一种方式。
2. 使用$("span.RedBackground").parent('div')来显示div。表示隐藏的span.RedBackground的父div显示
3. 您的选择器$("div span.RedBackground").show();表示div为span.RedBackground，但div被隐藏，因此您仍然无法看到任何
4. 如果跨度和隐藏div之间还有其他元素可以使用closest("div")
，请在下面评论

$("span.RedBackground").parent('div').show();

.greenBackground {
    color: green;
}

.RedBackground {
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="display: none;">
<span  class="RedBackground">show this</span>
</div>

<div style="display: none;">
<span  class="GreenBackground">NOT show this</span>
</div>