jQuery API の jQuery( ':hidden' ) は、非表示になっているすべての要素を選択する。type 属性が hidden である input 要素も、選択対象となる。
記述方法
jQuery( 'セレクター:hidden' )
セレクターに一致した要素のうち、非表示になっているすべての要素を選択する。
実装例(サンプル)
実装例(サンプル)の動作について
「表示」ボタンをクリックすると、入れ子になっているリスト要素を表示する。
実装例(サンプル)のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-api-click' ) . click( function () {
jQuery( '#jquery-api-hidden ul:hidden' ) . show();
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-click' ) . click( function () {
jQuery( '#jquery-api-hidden ul:hidden' ) . show();
} );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-api-hidden ul {
display: none;
}
-->
</style>
<!--
#jquery-api-hidden ul {
display: none;
}
-->
</style>
HTML
<button id="jquery-api-click">表示</button>
<ul id="jquery-api-hidden">
<li>項目1
<ul>
<li>項目1-1</li>
<li>項目1-2</li>
</ul>
</li>
<li>項目2
<ul>
<li>項目2-1</li>
<li>項目2-2
<ul>
<li>項目2-2-1</li>
<li>項目2-2-2</li>
</ul>
</li>
<li>項目2-3</li>
</ul>
</li>
<li>項目3</li>
</ul>
<ul id="jquery-api-hidden">
<li>項目1
<ul>
<li>項目1-1</li>
<li>項目1-2</li>
</ul>
</li>
<li>項目2
<ul>
<li>項目2-1</li>
<li>項目2-2
<ul>
<li>項目2-2-1</li>
<li>項目2-2-2</li>
</ul>
</li>
<li>項目2-3</li>
</ul>
</li>
<li>項目3</li>
</ul>