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>

期望的结果

默认情况下不显示 包含的li元素。此代码使用 Jquery 执行此操作。div.marriedyes

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

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

• 有没有办法只使用 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;
}