web-dev-qa-db-ja.com

jQueryを使用して、「表示：なし」ではなく「可視性：可視」または「可視性：非表示」のスタイルを持つアイテムを選択する

JQueryを使用して表示されている要素のみを選択するにはどうすればよいですか？

jQueryセレクター：visibleおよび：hiddenは、display：noneをreallyhiddenとしてのみ尊重しますか？可視性：非表示または可視性：可視ではありません。

私は彼らが技術的に隠されていないことを理解しています 彼らはまだ彼らのスペースを取るので 。表示されているチェックボックスをチェックできるように、状態を知りたいだけです。

<!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>
jquerycssjquery-selectorsvisibility
16
Peter Samuel

css関数を使用して要素のスタイルを取得し、filter関数を使用して要素のコレクションからそれらを選択できます。

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

jQuery 1.3.2リリースノート （：visible /：hidden Overhauled）から：

  • JQuery 1.3.1（およびそれ以前）では、CSSの場合に要素が表示されていました
    "display"は "none"ではなく、その[〜＃〜] css [〜＃〜]
    「可視性」は「非表示」ではなく、
    そのタイプ（入力の場合）は「非表示」ではありませんでした。
  • JQuery 1.3.2では、ブラウザで報告されたoffsetWidthまたはoffsetHeightがより大きい場合に要素が表示されます0より。

この変更はどういう意味ですか？これは、要素のCSS表示が「なし」の場合、その親/祖先要素の表示のいずれかが「なし」の場合、または要素の幅が0で要素の高さが0の場合、要素は非表示として報告されることを意味します。

11
karim79

私は独自のカスタムセレクターを作成しました：shownこのために。使用法：

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