:hidden

$(':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>

 Back to top

© 2010 - 2017 STUDIO KINGDOM