セレクター visible
セレクター :visible は、ページ上のすべての表示されている
要素を選択します。
visibility: hidden または
opacity: 0 の要素は、レイアウト内でスペースを占有するため、
表示されていると見なされます。
要素がドキュメント内でスペースを占有する場合、表示されていると見なされます。
表示されている要素は、0 以外の高さと幅を持ちます。
:visible は CSS 仕様に属していないため、
最新のブラウザーではパフォーマンスを向上させるために、
最初に純粋な CSS セレクターを使用して要素をフィルタリングし、
その後 .filter(':visible') を適用することをお勧めします。
クラスを使用するなど、他の方法で要素の可視性を追跡することで、
より良いパフォーマンスが得られる可能性があります。
構文
表示されている要素は次のように選択します:
$(':visible');
例
ボタンをクリックして、表示されていない四角を表示してみましょう。 「表示されている」四角をクリックすると、背景色が黄色に変わります:
<button id="show">表示</button>
<div></div>
<div style="display:none;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
div {
width: 40px;
height: 40px;
margin: 5px;
border: 2px outset green;
float: left;
}
$('div:visible').click(function() {
$(this).css('background', 'yellow');
});
$('#show').click(function() {
$('div:hidden').show('slow');
});
