Использование jQuery для выбора элементов, имеющих стиль "видимость: видимый" или "видимость: скрытый" NOT "display: none"

Как вы выбираете только видимые элементы с помощью jQuery?

Селекторы jQuery: видимые и: скрытые только уважают отображение: нет, поскольку они действительно скрыты? НЕ видимость: скрытая или видимая: видимая.

Я понимаю, что они не технически скрыты потому что они все еще занимают свое место. Я просто хочу знать их состояние, чтобы я мог проверить флажки, которые видны.

<!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>

Ответ 1

Вы можете использовать функцию css, чтобы получить стиль элемента, и функцию filter, чтобы выбрать их из коллекции элементов:

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

Ответ 2

Из jQuery 1.3.2 примечания к выпуску (: visible/: hidden Пересмотренный):

В jQuery 1.3.1 (и старше) элемент был виден, если его CSS "display" не был "none", его CSS
"видимость" не была "скрыта", а
его тип (если это был вход) не был "Скрытый".

В jQuery 1.3.2 элемент отображается, если его сообщенный браузером offsetWidth или offsetHeight больше 0.
Что означает это изменение? Это значит что если ваш элемент CSS-дисплей "none" или любой из его родителей/предков элемент "нет", или если ширина элемента равна 0, а элемент высота равна 0, тогда элемент будет сообщается как скрытый.

Ответ 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')
  }
});