Question

JSFIDDLE

$(document).ready(function() {
    $(".chk").click(function() {
        $(".chk:checked").each(function() {
           $("."+this.id).show();
        });       
        $(".chk:not(:checked)").each(function() {
           $("."+this.id).hide();
        }); 
        // give a message if nothing left to show       
    });  
});

<label>
    <input class="chk" type="checkbox" checked="checked" id="course">Courses
</label> 
<label>
    <input class="chk" type="checkbox" checked="checked" id="morning">Morning
</label> 
<label>
    <input class="chk" type="checkbox" checked="checked" id="evening">Evening
</label> 
<ul>
    <li class="courseBox course">Course</li>
    <li class="courseBox course evening">Course, Evening</li>
    <li class="courseBox morning">Morning </li>
</ul>

我如何最优雅地知道所有受影响的div是否都被隐藏了？

更新：如果您需要在fadeOut之后进行检查，则需要将检查放入回调中：

$(".chk:not(:checked)").each(function() {
  $("."+this.id).fadeOut(function() {
    if (!$('.courseBox:visible').length) {
      alert('all are hidden');
    }
  });
});

Answer 1

if (!$('.courseBox:visible').length)
    alert('all are hidden');

http://jsfiddle.net/JrAhR/6/

Answer 2

您需要:visible选择器：

if ($('div:visible').length == 0) alert('no more divs!');

Answer 3

计算可见的li元素：

 if ($('ul li:visible').length == 0) {
  alert("Everything is gone!")
 }

更多信息：

:visible selector

Answer 4

你可以试试这个：

$('ul').find(':hidden').length

这将为您提供＆＃34; ul＆＃34;下的元素数量。隐藏的

Answer 5

您的代码可以简化如下。

$(document).ready(function() {
    $(".chk").click(function() {
        $("." + this.id).toggle(this.checked);
        if($(".courseBox:visible").length == 0){
            alert("All divs are hidden");
        }
    });        
});

工作演示 - http://jsfiddle.net/ShankarSangoli/JrAhR/13/

检查是否所有div都被隐藏

5 个答案: