代码之家 › 专栏 › 技术社区 › Brian Johnson

如何隐藏jquery中只包含隐藏div的元素?

jquery javascript

Brian Johnson · 技术社区 · 16 年前

我想隐藏所有只包含隐藏分隔符的块(除了标题)。必须通过类名选择所有元素。

详细地说,我希望每个“eventBlock”在下面的所有“groupBlock”都已隐藏时不显示。与“菜单”相同,在隐藏所有子事件块时不应显示该菜单。

每个“菜单”包含多个事件块,

每个“EventBlock”包含一个或多个GroupBlock。

我正在使用类,不能使用ID,因为有很多GroupBlock、EventBlocks等。

如果相关的话,可以使用jquery的“hide()”函数隐藏div。

我的HTML基本上是这样的:

<div class="Menu">
     <strong><a name="one">Menu CAPTION</a></strong><br />
     <div class="eventBlock event1">
         <p class="underlined">eventBlock CAPTION</p>
         <div class="groupBlock group2">
             <strong>name</strong><br />
             4pm - 6pm<br />
         </div>
         <div class="groupBlock group1">
             <strong>name</strong><br />
             5pm - 7pm<br />
         </div>
     </div>
</div>

3 回复 | 直到 16 年前

Scott Evernden 16 年前

$('eventBlock').each(function() {
    if ($('.groupBlock:visible', this).length)
        $(this).show();
    else
        $(this).hide();
});

可以作为插件实现

james 16 年前

这应该有效:

var blocks = jQuery(".groupBlock");
if( blocks.size() == blocks.not(":visible").size() )
{
  blocks.parents(".eventBlock").hide();
}

如果所有分组块都隐藏,则可以执行类似的操作来隐藏菜单。

Kobi 16 年前

最简单的方法是使用单个jquery选择器:

$('.eventBlock:not(:has(.groupBlock:visible))').hide();

就个人而言,我发现 not() 功能更可读,我可以使用 end() 后来:

$('.eventBlock').not(':has(.groupBlock:visible)').hide();

现在,你想隐藏 Menu S也是吗?如果菜单没有可见的事件块,那么它似乎应该是隐藏的,这意味着它没有可见的分组块。因此,我们可以使用与以前相同的条件:

$('.eventBlock, .Menu').not(':has(.groupBlock:visible)').hide();

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

4 月前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

5 月前

user28928120 · 如何在jquery中选择所有类?

5 月前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

5 月前

Eliable · 使点击计数器和进度条协同工作

6 月前

mlri · 从不同的onclick事件执行相同的javascript函数

6 月前

Cymro · 如何将jquery$(this)与$(document).keyup一起使用

6 月前

Jack Maessen · 在处理程序上使用时如何获取输入类型

6 月前

BlueDogRanch · 使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)

6 月前

Jameel · Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)

6 月前