jquery - 如果子元素满足指定条件，则默认不显示父元素

Question

我有以下列表:

<ul>
<li class="container">
<div class="age">24</div>
<div class="married">no</div>
</li>

<li class="container">
<div class="age">27</div>
<div class="married">yes</div>
</li>

<li class="container">
<div class="age">34</div>
<div class="married">no</div>
</li>
</ul>

想要的结果

div.married 包含yes 的li 元素默认不显示。 This code使用 Jquery 做到这一点。

但在我的元素中有很多条目，所以每次加载页面时，您都可以看到相关条目在几分之一秒内闪烁。我认为这是因为在完全加载 body 标记末尾上方的行上加载的脚本之前，页面开始显示在您的浏览器上。

关于解决方案的问题和评论

• 有没有办法只使用 css 来完成我想做的事情？ (有 :contains 在 css 中，但我不想依赖它，因为它是 已弃用 css3)

• 我尝试在 head 元素中为该 Jquery 行创建一个单独的脚本条目，但是 仍然有明显的闪烁。

Answer 1

恐怕纯 CSS 是不可能的。如果您想避免闪烁效果，我建议采用这种方法:

js:

$(document).ready(function() {
  $(function(){
  ////Jquery in here/////  

  $(".married:contains(no)").parent().css('display','block');

   //////////////////////
 });
});

CSS:

li {
 display:none;
}