Question

我希望隐藏元素platform-group，具体取决于它是否有可见的job-btn个孩子。如果隐藏了所有孩子，那么我想隐藏父母。

所以，如果我的HTML显示如下：

B R( C J ) HideMe( )

我希望它显示如下：

B R( C J )

这里有一个JS小提琴：http://jsfiddle.net/cheshirecam/wf60z08n/5/

HTML：

<tr> 

<span style="display: inline-block;" class="job-btn">B</span>
<span style="display: inline;" class="platform-group">R(
        <span style="display: inline-block;" class="job-btn filter-shown">C</span>  
        <span style="display: inline-block;" class="job-btn filter-shown">J</span>
        <span style="display: none;" class="job-btn">V</span>
</span> 
<span style="display: inline;" class="platform-group">HideMe(
        <span style="display: none;" class="job-btn">C</span>  
        <span style="display: none;" class="job-btn">J</span>
</span> 

</tr>

CSS：

.platform-group::after {
    content: ")";
}

B，C和J是不同的工作代码。 C和J位于R的platform-group中。platform-group＆＃34; HideMe＆＃34;没有明显的工作，所以我希望自己隐藏起来。

作业会添加/删除filter-shown类，display: none或inline-block取决于用户可以设置的一些复杂过滤器参数。当我检查时，我可以添加或删除元素中的任何内容。添加/删除类似乎很慢，数据值似乎也很慢。是否有更好的标记元素，父母可以以某种方式检测？有点像这样的东西似乎非常接近：https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

我使用jQuery来检查父级是否有.filter-shown类的0后代作业然后隐藏它。

诀窍是，我在页面上这样做了数千次（它是一个非常普通的测试结果仪表板）我想要一个只有CSS（或者至少是大多数）的解决方案。问题是当打开和关闭过滤时它有点慢。分析表明，添加/删除filter-shown类对于每个作业来说都相当昂贵。

我不在重新安排HTML以使其工作，只要它在视觉上看起来大致相同。任何想要尝试的好方向的想法或想法都是最受欢迎的。

Answer 1

不是在Javascript / jQuery中添加类，而是通过设置父项的innerHTML来添加想要显示的子跨度？然后，如果没有添加跨度，则父元素将为空，然后您可以使用：empty，如： -

platform-group:empty {
    display : none;
}

CSS解决方案，当所有子项都不可见时，使父项不可见

1 个答案: