jQueryでclassを取得する方法を解説【セレクタ、attr()】

jQueryではclass名を取得する機会は多いです。class名は処理を行うための要素を指定するためのセレクタとして取得したり、classの値自体を取得することがあります。

特に、セレクタとして取得する方法は書き方を間違えるとコードを読み込めず、処理が動かない不具合となります。

また、class名を値として取得方法が分かれば応用としてclass名を追加、変更、削除することも可能です。class名の追加、変更、削除ができれば、イベント処理に応じて要素を隠したり、表示させたりすることができます。

本記事ではclass名を取得する方法を解説します。

class名を取得する方法

セレクタとしてclassを取得する

セレクタとしてclassを取得する方法は$(“.class名”)です。class名の前に「.(ドット)」を入れておかなければclassの取得はできないので気をつけてください。

classをセレクタとして取得するのは、処理を与えたい要素を指定するために使用します。例えば、一部のdiv要素のCSSをdisplay:noneに変えたい時に、class名を設定しておけば、class名が設定されたdiv要素のみ非表示になります。コード例を用いて紹介します。

<div class="display-none">要素１</div>
<div class="display-none">要素２</div>
<div class="display">要素３</div>
<div class="display">要素４</div>

上のdivタグの要素１と要素２のCSSをdisplay:noneにしたい場合、$(“.display-none”)としてclassを取得します。処理するためのコードは以下の通りです。

$('.display-none').css('display', 'none');

値としてclass名を取得する

値としてclass名を取得する場合はattrメソッドを使います。基本構文は以下の通りです。

$('class名を取得したいセレクタ').attr('class');

上記のコードを実行すれば、戻り値としてclass名が取得できます。このままでは、取得した値を使うことができませんので、変数に代入するのが一般的です。classNameという変数にdivタグのclass名を代入するためのコードは以下の通りです。

<div class="getClass">この要素のクラス名を取得</div>

var className = $('div').attr('class');
console.log(className);

上記のコードではコンソールにclass名が表示されます。取得されたかの確認のためのコードです。

class名を追加、変更、削除する方法

追加する方法

attrメソッドを使うとclass名を追加することができます。例えば、divタグに「addition」というclass名を追加するコードは以下の通りです。ただし、要素にclass名が設定されていない場合のみです。

$('div').attr('class', 'addition');

class名を追加することで事前に用意しておいたCSSやjQueryのコードを要素に反映することができます。

CSSを反映させる場合は、CSSメソッドがありますが、CSSのコードが多い場合にはjQueryのコードが長くなります。事前に追加するclass名のCSSを用意しておいて、classを追加する処理をした方がコードの量も少ないです。

他にも追加する方法としてaddClassメソッドがあります。

変更する方法

attrメソッドはclass名の変更も可能です。変更する方法は追加と同じです。元々classを持っていた場合はattrメソッドを使えば元々のclass名を変更できます。つまり、class名を持っている要素に対してattrメソッドではclass名を複数にすることはできません。

基本構文は以下の通りです。lawというclassを持ったdivタグをchangeというclass名に変更するコードです。

<div class="law">クラス名が変更されます</div>

$('div').attr('class', 'change');

本コードが実行されればHTMLは以下のように変わります。

<div class="change">クラス名が変更されます</div>

削除する方法

削除するにはremoveAttrメソッドを使います。removeは英語で「削除する」という意味を持ちます。指定された要素のclassを削除することができます。基本構文は以下の通りです。

$('削除したい要素のセレクタ').removeAttr('class');

例えば、div要素のclassを削除したい場合は以下の通りです。

$('div').removeAttr('class');

attrメソッドはid名も取得できる

attrメソッドはid名も同様に取得することができます。ここまではattrメソッドでclass名を取得したり、追加、変更、削除する方法を紹介しました。本操作はid名でも同様になります。attrメソッドの引数をidにすれば、idに対しても値の取得、追加、変更、削除が可能です。

ただし、idはHTML１つに対して1つの値しか使えないので、追加する値を重複しないようにする必要があるので、注意してください。

まとめ

HTMLのclassはセレクタと値の2種類の取得があります。セレクタとして取得できなければ、コードが動かないので、必ず覚えておく必要があります。一方、値として取得する方法を知れば、classの追加、変更が可能です。

Webページに動きをつける上で、class名の取得、操作は複雑な機能を単純にしたり、コードを短くすることに繋がります。また、削除することも一緒に覚えれば機能の幅が拡大し、見やすいWebページが作成可能です。

attrメソッドについても必ず覚えておくことをおすすめします。