检查所有子元素是否隐藏

Question

我在这里卡住了，我的脚本是：

它是一个复选框，过滤所有的 .notme 图像并隐藏其列表项。 问题是，我无法获得 fadeToggle 的工作回调函数。 它应该像这样表现：

如果所有 #list-team-single-container 的子元素都是“显示为none” - 做某事。

$('#show-only-my-teams').change(function(){
    $('.notme').each(function(){
        $(this).parent().parent().fadeToggle('fast', function(){
        });
    });
}); 

- ggzone

---

任何标记，例如子元素？ - John Magnolia

Answer 1

if($('#list-team-single-container').children(':visible').length == 0) {
   // action when all are hidden
}

- thecodeparadox

---

加一，但我建议使用“===”代替“==”。 - Sablefoste

请注意：":visible" 表示该元素在页面上占用空间。如果它嵌套在隐藏的元素中并且当前未显示，则不会被视为 ":visible"。如果您想确保它不是 "display:none"，则可能不足够。 - Rikaelus

如果我正在检查样式，那该怎么办？ display: none 还是 display: block？ 它对于 none 可以工作，但对于 block 却不行。 - Si8

@Si8 你可以检查子元素的属性。 - I try so hard but I cry harder

Answer 2

:visible jQuery选择器可能是你要找的...

从描述中可以了解到：

元素如果在文档中占用空间，则被认为是可见的。具有宽度或高度大于零的元素视为可见。

具有visibility:hidden或opacity:0属性的元素也被认为是可见的，因为它们仍然在布局中占用空间。在隐藏元素的动画期间，直到动画结束，该元素被认为是可见的。对于显示元素的动画，在动画开始时将该元素视为可见。 http://api.jquery.com/visible-selector/

$('#list-team-single-container').children(':visible');

那行代码将返回所有可见的#list-team-single-container的子元素。

$('#list-team-single-container').children(':visible').length;

这行代码将返回#list-team-single-container元素中可见的子元素数量。

- Lix

Answer 3

没有看到您的标记，很难具体说明，但我想做以下操作：

var isVisible = 0;

$('.notme').each( function() {
    if( $(this).is(":visible") {
         isVisible++;
    }
});

if ( isVisible == 0 )
    // do something

- rgin

---

你可能想要重构你的例子... error 不是代表那个变量的正确方式... 或许可以用 visibleItems... 给它取名为 error 变量有点令人困惑。实际上并没有发生错误... - Lix

没错，但在我的想法中，它作为可见而非隐藏的元素是我所创建逻辑上的错误。因此，我标记为错误。=) - rgin

啊！你明白了——在你的脑海中——其他人来读你的代码怎么办呢？就是这样:P - Lix

我会用一个赞来贿赂你改变那个变量名 ;) 只要感谢我没有用踩票来威胁你！哈哈 - Lix