jQuery教程分享使用jQuery选择具有“visibility:visible”或“visibility:hidden”样式的项目NOT“display:none”

你如何使用jQuery仅选择可见元素?

jQuery选择器:可见和:隐藏只尊重显示:无实时隐藏? NOT visibility:hidden或visibility:visible。

我知道他们在技术上并不隐藏, 因为他们仍然占据了他们的空间 。 我只是想知道他们的状态,所以我可以查看可见的复选框。

   jQuery :visiblity Selector Test   $(document).ready(function() { $("#VisibleCount").text($("input[type=checkbox]:visible").length); //returns 3. I think it should be 2 $("#HiddenCount").text($("input[type=checkbox]:hidden").length); //returns 1. I think it should be 2 });   #TestArea { border: solid red 1px; } #Results { background-color: Lime; } .container { border: solid black 1px; }    
visibility: hidden;
visibility: visible;
display: none;
display: inline;
Visible Count:
Hidden Count:

    您可以使用css函数获取元素的样式,并使用filter函数从元素集合中选择它们:

     var visible = $('input[type=checkbox]').filter(function() { return !($(this).css('visibility') == 'hidden' || $(this).css('display') == 'none'); }); 

    从jQuery 1.3.2发行说明 (:visible /:hidden Overhauled):

    这种变化意味着什么? 这意味着如果元素的CSS显示为“none”,或者其父/祖先元素的任何显示为“none”,或者元素的宽度为0且元素的高度为0,则元素将报告为隐藏。

    我已经创建了自己的自定义选择器为此显示。 用法:

     var visible = $('input[type=checkbox]').is(':shown'); 

    或(等):

     $("#VisibleCount").text($("input[type=checkbox]:shown").length); 

    只需在这里包含这个简单的代码:

     jQuery.extend(jQuery.expr[':'], { shown: function (el, index, selector) { return $(el).css('visibility') != 'hidden' && $(el).css('display') != 'none' && !$(el).is(':hidden') } }); 

      以上就是jQuery教程分享使用jQuery选择具有“visibility:visible”或“visibility:hidden”样式的项目NOT“display:none”相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注(猴子技术宅)。

      本文来自网络收集,不代表猴子技术宅立场,如涉及侵权请点击右边联系管理员删除。

      如若转载,请注明出处:https://www.ssfiction.com/jqyjc/546496.html

      发表评论

      电子邮件地址不会被公开。 必填项已用*标注