連載：jQuery逆引きリファレンス

【セレクタ編】

特定の状態にある要素のみを取得するには？

山田 祥寛（http://www.wings.msn.to/）
2009/10/09

　フィルタを利用することで、特定の状態にある要素だけを取り出すこともできます。主なフィルタを以下にまとめておきましょう。

フィルタ 概要
：hidden 非表示状態にある要素を取得
：visible 表示状態にある要素を取得
：enabled 利用可能な状態にある要素を取得
：disabled 利用不可の状態にある要素を取得
：checked チェック済みの要素を取得
：selected 選択状態にある要素を取得
：animated アニメーション中の要素を取得
状態に関連したフィルタ

　以下は、それぞれの条件に応じてスタイルを適用する例です。

  • 非表示の要素を3000ミリ秒かけて表示状態に
  • 利用不可の状態にあるテキストボックスの背景色を灰色に
  • チェック状態にあるチェックボックスの背景色をライム色に
<script type="text/javascript">

$(function() {
  $(':hidden').show(3000);
  $(':text:disabled').css('background-color', 'Silver');
  $(':checkbox:checked').css('background-color', 'Lime');
});

</script>

……中略……

<div style="display:none">
  <img src="http://www.wings.msn.to/books/978-4-7981-1957-1/978-4-7981-1957-1_logo.jpg" alt="ASP.NET" />
</div>
<input type="text" disabled="disabled" /><br />
<input type="checkbox" checked="checked" />
リスト027 特定の状態にある要素のみを取得（Condition.html）

ブラウザで開く


3秒後
リスト027の実行結果


インデックス・ページヘ 　「jQuery逆引きリファレンス」

TechTargetジャパン

Insider.NET フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

- PR -
＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る
- PR -

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH