Использование jQuery для выбора элементов, имеющих стиль «видимость: видимый» или «видимость: скрытый» НЕ «отображение: нет» - PullRequest
Новая
       20

Использование jQuery для выбора элементов, имеющих стиль «видимость: видимый» или «видимость: скрытый» НЕ «отображение: нет»

16 голосов
/ 17 февраля 2010

Как выбрать только видимые элементы с помощью 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>

Ответы [ 3 ]

41 голосов
/ 17 февраля 2010

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

var visible = $('input[type=checkbox]').filter(function() {
   return !($(this).css('visibility') == 'hidden' || $(this).css('display') == 'none');
});
11 голосов
/ 17 февраля 2010

Из примечаний к выпуску jQuery 1.3.2 (: видимый /: скрытый капитальный ремонт):

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

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

7 голосов
/ 13 ноября 2015

Я создал свой собственный селектор : для этого показано . Использование: 

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')
  }
});
...