デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

:visible表示されている要素を選択

構文

表示されている要素を選択
$(":visible")ver1.0〜
※:(コロン)を忘れないように注意しましょう

機能

:(コロン)に続けてvisibleを設定すると表示されている要素を選択します。html上の要素はほとんどが表示されているため、単独で利用するのではなく複数のセレクタ(and)と合わせて利用することが多いでしょう。

解説

単独では利用しないでしょう

サンプル(visible/01.html)を開いてbody内にdiv要素が4つあることを確認してください。jQueryは以下の様に記述され、buttonをクリックすると表示されている要素を選択し、cssメソッドで赤枠を表示するようにしています。

$(function () {
	$(":visible").css("border","3px solid red");
});

結果として、buttonをクリックするとhtml要素やbody要素も含めて全ての要素が:visibleによって選択され、赤枠が表示されます。ですので単独で利用されることはないでしょう。

他のセレクタと組みあわせる

サンプル(visible/02.html)を開いてください。body内の構成はvisible/01.htmlと同じ事を確認してください。jQueryは以下の様に記述され、複数のセレクタ(and)を利用してdiv要素と組合せました。そのためbuttonがクリックされたら、div要素のうち表示されている要素を選択しslideUpメソッドを利用して消すようにしました。

$("button").click(function(){
	$("div:visible").slideUp();
})

結果として、buttonをクリックすると表示されている全てのdiv要素がslideUpして消えます。

関連項目

隠れている要素を選択したい場合は:hiddenを利用します。

メモ

使いどころ

サンプルvisible/02.htmlのdivは全て表示されているので:visibleを利用する必要はありません。実際に:visibleを利用していないサンプル(visible/02b.html)を用意しました。以下の様にjQueryのセレクタから:visibleを外してもサンプルvisible/02.htmlと同じように機能します。

$("button").click(function(){
	$("div").slideUp();
})

では、どの様なケースで:visibleを利用すれば良いのでしょうか?それは対象にあらかじめ表示されていない要素が含まれている時です。サンプル(visible/test01.html)を開き、body内にあるdiv要素のうち、2つにclass属性でhideが設定され表示されていないことを確認してください。

もし子のサンプルで:visibleを利用しない場合は、4つ全てのdiv要素に対しslideUpメソッドが実行されます。しかし2つのdiv要素は見えていないので処理する必要はなく、無駄な処理となってしまいます。:visibleを利用すれば、消えているものは処理しないので、その分すこしだけ効率が良くなるのです。