jqueryでのhiddenの使い方｜選択される隠された要素もあわせて解説
- プロジェクト
リーダー - visibilityプロパティを使うと、隠された要素の中の一部だけを表示するなどの小回りが効くんですよ。
- プログラマー
- なるほど…！
jqueryにおけるhiddenとhideとの違い
jqueryには要素の表示状態に関する機能がいくつかありますが、その中でも非表示な要素に対する機能としてhiddenとhideがあります。今回はhiddenとhideの違いやそれぞれの使い方について解説していきます。ぜひ、参考にしてください。
構文から見る違い
jqueryにおけるhiddenとはセレクタです。セレクタで要素を取得するときに：（コロン）に続けてhiddenを設定すると画面上で非表示になっている要素を選択することができます。
jqueryにおけるhideとはメソッドです。jquery要素にhideメソッドを使うことで要素を非表示にすることができます。
使い方から見る違い
hiddenセレクタは以下のように使います。
|
1
2
3
4
5
6
7
|
// :hiddenのみを指定すると画面内の全ての非表示な要素を取得する
let allHiddenItem = $(":hidden");
// inputのような要素セレクタの後に:hiddenを指定すると指定した要素のうち非表示な要素を取得する
let hiddenInputItem = $("input:hidden");
|
hideメソッドは以下のように使います。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<title>jqueryでhideメソッドを使うサンプル</title>
</head>
<body>
<div id="div_1">
this is div_1
</div>
<!-- hide/showボタンで表示が切り替わる -->
<div id="div_2">
this is div_2
</div>
<div id="div_3">
this is div_3
</div>
<input type="button" id="button_hide" value="hide"/>
<input type="button" id="button_show" value="show"/>
<script>
$("#button_hide").click(function(){
$("#div_2").hide(); // #div_2要素を非表示にする
});
$("#button_show").click(function(){
$("#div_2").show(); // #div_2要素を表示する
});
</script>
</body>
</html>
|
hiddenを設定することによって選択される隠された要素3つ
hiddenセレクタは画面に表示されていない要素を取得することができます。表示されていない要素には、透明度・幅・高さが０である、編集フォームでtypeがhiddenである、CSS設定においてdisplayがnoneである、の3つのパターンがあります。
1：透明度・幅・高さが0である
CSSのwidth、heightプロパティなどで幅と高さを0に設定すると、その要素は画面に表示されなくなります。また、fadeOutメソッドを使うとアニメーションしながら要素を隠すことができ、その要素は透明度が0になり画面に表示されなくなります。hiddenセレクタではこれらの要素を取得することができます。
2：編集フォームでtypeがhiddenである
フォーム要素はtypeに設定した値によってさまざまなコントロールになりますが、typeにhiddenを設定すると画面に表示されないコントロールになります。hiddenセレクタではこの画面に表示されないコントロールを取得することができます。
3：css設定においてdisplayがnoneである
CSSのdisplayプロパティは要素の表示形式を決めるもので、blockやinline、inline-blockなどを設定できます。このdisplayプロパティにnoneを指定するとその要素は非表示になります。hiddenセレクタではこの非表示になった要素を取得することができます。
jqueryでのhiddenの使い方7つ
では、実際にjqueryでhiddenセレクタを使う方法について解説していきます。
hiddenセレクタの使い方としては、name属性を使った値の取得および設定、id属性を使った値の取得および設定、カンマ区切りで複数値の取得および設定があります。
これらについてサンプルコードを交えて説明します。また、hiddenと似た意味を持つvisibilityの使い方についても説明します。
1：nameを使用してhiddenに値を設定する方法
name属性を使用してhiddenな要素に値を設定します。サンプルコードは以下のようになります。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<title>name属性を使用してhiddenなinput要素へ値を設定するサンプル</title>
</head>
<body>
<div>
hiddenなinput要素の値:<span id="display_value"></span>
</div>
<form>
<input type="hidden" id="hidden_input_1" name="hidden-input-1" value="value1"/>
<input type="button" id="button_get" value="設定"/>
<input type="button" id="button_clear" value="クリア"/>
</form>
<script>
$("#button_get").click(function(){
// input要素のうち非表示なもので、nameが"hidden-input-1"の要素を取得し、valメソッドで値を設定する
$('input:hidden[name="hidden-input-1"]').val('new Value');
let hiddenValue = $('input:hidden[name="hidden-input-1"]').val();
$("#display_value").text(hiddenValue);
});
$("#button_clear").click(function(){
$("#display_value").text('');
});
</script>
</body>
</html>
|
2：nameを使用してhiddenの値を取得する方法
name属性を使用してhiddenな要素の値を取得します。サンプルコードは以下のようになります。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<title>name属性を使用してhiddenなinput要素から値を取得するサンプル</title>
</head>
<body>
<div>
hiddenなinput要素の値:<span id="display_value"></span>
</div>
<form>
<input type="hidden" id="hidden_input_2" name="hidden-input-2" value="value2"/>
<input type="button" id="button_get" value="取得"/>
<input type="button" id="button_clear" value="クリア"/>
</form>
<script>
$("#button_get").click(function(){
// input要素のうち非表示なもので、nameが"hidden-input-1"の要素を取得し、valメソッドで値を取得する
let hiddenValue = $('input:hidden[name="hidden-input-2"]').val();
$("#display_value").text(hiddenValue);
});
$("#button_clear").click(function(){
$("#display_value").text('');
});
</script>
</body>
</html>
|
3：idを使ってhiddenの値を設定する方法
id属性を使用してhiddenな要素の値を設定します。サンプルコードは以下のようになります。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<title>id属性を使用してhiddenなinput要素へ値を設定するサンプル</title>
</head>
<body>
<div>
hiddenなinput要素の値:<span id="display_value"></span>
</div>
<form>
<input type="hidden" id="hidden_input_3" name="hidden-input-3" value="value3"/>
<input type="button" id="button_get" value="設定"/>
<input type="button" id="button_clear" value="クリア"/>
</form>
<script>
$("#button_get").click(function(){
// idが"#hidden_input_3"の要素を取得し、valメソッドで値を設定する
$("#hidden_input_3").val("new Value");
let hiddenValue = $("#hidden_input_3").val();
$("#display_value").text(hiddenValue);
});
$("#button_clear").click(function(){
$("#display_value").text('');
});
</script>
</body>
</html>
|
4：idを使ってhiddenの値を取得する方法
id属性を使用してhiddenな要素の値を取得します。サンプルコードは以下のようになります。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<title>id属性を使用してhiddenなinput要素の値を取得するサンプル</title>
</head>
<body>
<div>
hiddenなinput要素の値:<span id="display_value"></span>
</div>
<form>
<input type="hidden" id="hidden_input_4" name="hidden-input-4" value="value4"/>
<input type="button" id="button_get" value="設定"/>
<input type="button" id="button_clear" value="クリア"/>
</form>
<script>
$("#button_get").click(function(){
// idが"#hidden_input_4"の要素を取得し、valメソッドで値を取得する
let hiddenValue = $("#hidden_input_4").val();
$("#display_value").text(hiddenValue);
});
$("#button_clear").click(function(){
$("#display_value").text('');
});
</script>
</body>
</html>
|
5：hiddenに配列をカンマ区切りで設定する方法
hiddenな要素に配列をカンマ区切りで設定します。サンプルコードは以下のようになります。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<title>hiddenに配列をカンマ区切りで設定するサンプル</title>
</head>
<body>
<div>
hiddenなinput要素の値:<span id="display_value"></span>
</div>
<form>
<input type="hidden" id="hidden_input_5" name="hidden-input-5" value="value5"/>
<input type="button" id="button_get" value="設定"/>
<input type="button" id="button_clear" value="クリア"/>
</form>
<script>
$("#button_get").click(function(){
// hiddenな要素にvalメソッドで配列を値として設定することができる
$("#hidden_input_5").val(["red", "blue", "green"]);
// valメソッドで配列を値として設定するとカンマ区切りの値で保存される
let hiddenValue = $("#hidden_input_5").val();
$("#display_value").text(hiddenValue);
});
$("#button_clear").click(function(){
$("#display_value").text('');
});
</script>
</body>
</html>
|
6：カンマ区切りのhiddenデータを配列として取得する方法
カンマ区切りのhiddenな要素の値を配列として取得します。サンプルコードは以下のようになります。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<title>hiddenのカンマ区切りの値を配列として取得するサンプル</title>
</head>
<body>
<div>
hiddenなinput要素の値:<span id="display_input_value"></span>
</div>
<div>
取得した配列:<span id="display_get_value"></span>
</div>
<form>
<input type="hidden" id="hidden_input_6" name="hidden-input-6" value="red,green,blue"/>
<input type="button" id="button_get" value="設定"/>
<input type="button" id="button_clear" value="クリア"/>
</form>
<script>
$("#button_get").click(function(){
// 配列を値として設定した要素から値を取得するとカンマ区切りの値で取得される
let hiddenValue = $("#hidden_input_6").val();
// カンマ区切りの値を配列にするにはsplitメソッドを使用する
let splitted = hiddenValue.split(",");
$("#display_input_value").text(JSON.stringify(hiddenValue));
$("#display_get_value").text(JSON.stringify(splitted));
});
$("#button_clear").click(function(){
$("#display_input_value").text("");
$("#display_get_value").text("");
});
</script>
</body>
</html>
|
7：hiddenと似た意味を持つvisibilityプロパティの使い方
visibilityプロパティは、要素の表示形式を変更できるCSSのプロパティの一つです。visibilityプロパティでは、以下のような値を使ってjqueryの中で次のように記述します。
■要素を表示
要素名.style.visibility = “visible”;
■要素の非表示
要素名.style.visibility = “hidden”;
■要素を詰めて非表示
要素名.style.visibility = “collapse”;
同じように表示・非表示を切り替えるプロパティに [display: none] が挙げられますが、displayプロパティは要素分の領域を詰めるのに対し、visibilityプロパティでは要素分の領域を確保するため、レイアウトが崩れにくいというメリットがあります。
ただし、一点注意点として“Internet Explorerには対応していない”ということを覚えておきましょう。
＜補足＞
Internet Explorer（IE）は、今回のvisibilityプロパティをはじめ他のプロパティなどにも対応していないことが多いです。開発を行う環境としてIEは優れていないため、もし現在IEを使用しているのであれば他のブラウザに切り替えることをおすすめします。
visibilityプロパティを使って表示・非表示を切り替えてみよう
ここでは、実際にvisibilityプロパティを使って要素の表示・非表示を切り替えていきます。
ソースコードは次のとおりです。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<script>
// ロゴを可視
function visible(){
var logo1 = document.getElementById("limitedLogo");
logo1.style.visibility = "visible";
}
// ロゴを不可視
function unvisible(){
var logo1 = document.getElementById("limitedLogo");
logo1.style.visibility = "hidden";
}
</script>
|
|
1
2
3
4
5
6
7
8
9
|
<div class="logo_disp">
<img id="limitedLogo" class="logo" src="logo.png"><br/>
<div>
<input type="button" value="表示" onclick="visible();"/>
<input type="button" value="非表示" onclick="unvisible();"/>
</div>
</div>
|
実行すると、次のような結果になります。
では、真ん中のロゴを非表示にしてみましょう。
すると・・・
ロゴは非表示となっていますが、ロゴがあった場所は残っていることが分かりますね。これがvisibilityプロパティの最大の特徴です。ちなみにvisibilityプロパティを使わずに [display] プロパティを使うと、次のような表示となります。
jqueryでhiddenを使うときの注意点
:hiddenセレクタはjqueryの拡張機能であり、CSSの仕様には含まれていないセレクタです。このため、他セレクタと比べると処理が若干重くなります。
対処法としてはCSSのセレクタで要素を選択したのちにトラバースのfilterメソッドで再度絞り込むようにする方法があります。
- プロジェクト
リーダー - このように、それぞれのプロパティやメソッドの特徴を知っておくと、ウェブページを作成するときにも役立ちますよ。
- プログラマー
- 分かりました！
必要に応じてhiddenやvisibilityプロパティを活用していこう
jQueryでは表示・非表示を切り替えるためのさまざまなプロパティやメソッドが用意されているため、比較的visibilityプロパティの出番は少ないかもしれません。しかし、“要素分の領域を確保したまま非表示にできる”という特徴があるなど、使い方によっては非常に便利なプロパティなので、ぜひ上手く活用してみてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
新着案件New Job
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅) -
PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万～55万円東京都豊島区(池袋駅)
関連記事Related Posts
-
jQueryでCSSのスタイルを変更する方法
Webアプリケーションの見栄えを良くするために使われるCSS。CSSファイルを別に作成して読み込むという方法が一般的ですが、実はjQueryでもCSSを直書きが可能です。 この記事では、サンプルコードを例に挙げながらjQ […]
-
jQuery UIのダウンロードの手順と使い方
「jQuery UI」を利用すると、Webサイトの画面項目に動きを付けることや、画面の見た目がリッチなデザインを作成することができます。 主にカレンダー、アコーディオン、ダイアログ、エフェクトなど、多くの機能が用意されて […]
-
jQueryのタグ追加方法とタグの種類
Webアプリケーションを作成していると、クリック時に入力欄を増やしたり、ユーザーの入力内容によって項目の選択肢を増やしたりなど、HTMLのタグを追加したい場合があります。 jQueryを利用すれば、豊富な種類のタグ追加を […]
-
jQueryで要素の表示と非表示を行う方法その1【display none】
jQueryでは、CSSのdisplayプロパティを使うことで要素の表示・非表示を切り替えることができます。今回は、displayプロパティの概要や実際の使い方を紹介していきます。 ぜひ、参考にしてみてください。 dis […]
-
【jQueryが動かない】Chromeのデベロッパーツールで原因を見つける方法
「jQueryを記述したのに動かない！」と悩んでいないでしょうか。しかし、心配はご無用です。Chromeのデベロッパーツールを使えば、エラーの原因を短時間で見つけることができます。修正の仕方が分からなくて時間ばかり過ぎて […]
