Question

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

jQuery选择器：可见和：隐藏只尊重显示：无真正隐藏？ NOT visibility：hidden或visibility：visible。

我知道它们在技术上并不隐藏because they still take their space。我只是想知道他们的状态，所以我可以查看可见的复选框。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery :visiblity Selector Test</title>

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

<script type="text/javascript">
    $(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
    });
</script>

<style type="text/css">
    #TestArea
    {
        border: solid red 1px;
    }
    #Results
    {
        background-color: Lime;
    }
    .container
    {
        border: solid black 1px;
    }
</style>
</head>
<body>
<div id="TestArea">
    <div class="container">
        visibility: hidden;<div style="visibility: hidden;">
            <input id="Checkbox1" type="checkbox" />
        </div>
    </div>
    <div class="container">
        visibility: visible;<div style="visibility: visible;">
            <input id="Checkbox2" type="checkbox" />
        </div>
    </div>
    <div class="container">
        display: none;<div style="display: none;">
            <input id="Checkbox3" type="checkbox" />
        </div>
    </div>
    <div class="container">
        display: inline;<div style="display: inline;">
            <input id="Checkbox4" type="checkbox" />
        </div>
    </div>
</div>
<div id="Results">
    <div>
        Visible Count: <span id="VisibleCount"></span>
    </div>
    <div>
        Hidden Count: <span id="HiddenCount"></span>
    </div>
</div>
</body>
</html>

Answer 1

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

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

Answer 2

来自jQuery 1.3.2 release notes（：可见/：隐藏的大修）：

在jQuery 1.3.1（和更早版本）中，如果它的CSS为一个元素是可见的   “display”不是“none”，它的 CSS
  “可见性”未被“隐藏”，
  它的类型（如果是输入）不是   “隐藏”。

在jQuery 1.3.2 中，如果浏览器报告，则元素可见    offsetWidth或offsetHeight   大于0。


这种变化意味着什么？它的意思是   如果您的元素的CSS显示是   “无”，或其任何父/祖先   元素的显示是“无”，或者如果是   element的宽度为0，元素为   高度为0然后是一个元素   报告为隐藏。

Answer 3

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

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选择具有“visibility：visible”或“visibility：hidden”样式的项目NOT“display：none”

3 个答案: