:hidden
- $(':hidden') 1.0追加
- 補足事項
- デモ
$(':hidden') 1.0追加
Hidden状態の要素を選択します。
次のような状態に該当する要素をhidden要素とみなします。
- CSSのdisplay値がnone
- type="hidden"のフォーム要素
- widthとheightが明示的に0が指定されている
- 先祖要素がhiddenのため、ページ上に表示されない
visibility:hidden または、opacity:0はhidden要素とはみなされません。 この指定では、要素は透明になるものの領域分の幅と高さは確保されるからです。 また、アニメーション中に要素が隠れることがあっても、アニメーションが 完了するまではhidden要素とはみなされません。
jQuery1.3.2でhidden状態の判定基準が変更されました。 要素、またはその親要素がDocument中のスペースを消費していない場合はhidden状態であるとみなします。 そのため、CSSのvisibilityはこの判定に考慮されません。( $(elem).css('visibility','hidden').is(':hidden') == false )
補足事項
:hiddenはjQueryが独自に拡張した仕組みでCSSには存在しない概念です。 そのため、querySelectorAll()によって提供されるパフォーマンスを享受することが出来ません。 最高のパフォーマンスを出すためには、純粋なCSSセレクタのみを使用して要素を特定し、 それに対して.filter(":hidden")を適用してください。
デモ
<!DOCTYPE html>
<html>
<head>
<style>
body {font-size:12px;}
div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; }
span { display:block; clear:left; color:red; }
.starthidden { display:none; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<span></span>
<div></div>
<div style="display:none;">hidden要素</div>
<div></div>
<div class="starthidden">hidden要素</div>
<div></div>
<form>
<input type="hidden" />
<input type="hidden" />
<input type="hidden" />
</form>
<span>
</span>
<script>
//ブラウザによっては、head,title,scriptをhiddenとみなすので…。
var hiddenEls = $("body").find(":hidden").not("script");
//DIVが2つ、input="hidden"が3つで合計5つ
$("span:first").text(hiddenEls.length + "つのhidden要素");
$("div:hidden").show(3000);
//DIVがshowされて、3つに
$("span:last").text($("input:hidden").length + "つのhiddenの要素");
</script>
</body>
</html>
© 2010 - 2017 STUDIO KINGDOM