jQueryで特定のクラスを持つ要素を取得する方法
jQueryを使ってWebページを操作する際、特定のクラスを持つ要素を取得したい場合があります。例えば、ボタンをクリックしたら特定のクラスを持つ要素を非表示にしたい場合などです。今回は、jQueryを使って特定のクラスを持つ要素を取得する方法を解説します。
.classセレクターを使う
jQueryで特定のクラスを持つ要素を取得するには、.classセレクターを使います。.classセレクターは、ピリオド文字(.)の後にクラス名を続けることで指定します。
例えば、testというクラスを持つ要素を取得するには、次のように記述します。
$('.test')
このコードは、testというクラスを持つ全ての要素をjQueryオブジェクトとして取得します。
使用例
.classセレクターを使った具体的な例を見てみましょう。以下のHTMLコードは、ボタンと、testというクラスを持つ段落要素を含んでいます。
<button id="myButton">ボタン</button>
<p class="test">この要素は非表示になります。</p>
このHTMLコードに対して、以下のjQueryコードを実行すると、ボタンをクリックした際にtestクラスを持つ段落要素が非表示になります。
$(document).ready(function(){
$('#myButton').click(function(){
$('.test').hide();
});
});
このコードでは、まず$(document).ready()を使って、DOMの読み込みが完了してからコードを実行するようにしています。そして、click()メソッドを使ってボタンにクリックイベントを設定しています。クリックイベントが発生すると、$('.test').hide()が実行され、testクラスを持つ要素が非表示になります。
複数のクラスを持つ要素を選択する
要素が複数のクラスを持っている場合は、クラス名をスペース区切りで繋げることで、複数のクラスを持つ要素を選択することができます。例えば、test1とtest2という2つのクラスを持つ要素を選択したい場合は、次のように記述します。
$('.test1.test2')
参考資料
よくある質問
Q1. 特定のクラスを持つ要素の数を取得するにはどうすればよいですか？
A1. .lengthプロパティを使用します。例えば、testクラスを持つ要素の数を取得するには、$('.test').lengthと記述します。
Q2. 特定のクラスを持つ要素に新しいクラスを追加するにはどうすればよいですか？
A2. addClass()メソッドを使用します。例えば、testクラスを持つ要素にnew-classというクラスを追加するには、$('.test').addClass('new-class')と記述します。
Q3. 特定のクラスを持つ要素の子要素を取得するにはどうすればよいですか？
A3. 子要素セレクター(>)を使用します。例えば、testクラスを持つ要素の直下のli要素を取得するには、$('.test > li')と記述します。
その他の参考記事:jquery eq 取得