【jQuery】classが要素にあるか・存在するかどうかをチェックする

クラスやid、要素があるかを判別する jQuery コードのメモです。

hasClass() | 特定の要素が特定のクラスを持っているか

$('要素').hasClass('クラス名'); でその要素に指定したクラスがついている場合に何か処理をさせることができます。

$('p').hasClass('hello');
$('.class').hasClass('hello');
$('#id').hasClass('hello');

$('p').hasClass('hello');
$('.class').hasClass('hello');
$('#id').hasClass('hello');

引数のクラス名には「.」（ドット）は不要です。

返り値はクラスがあれば true なければ false です。

hasClass() で複数のクラスを指定する

複数のクラスを指定することも可能です。クラスごとに半角スペースを追加して続けて記述します。

$('p').hasClass('hello world');

$('p').hasClass('hello world');

この場合、クラスに指定している文字列が完全に一致すればちゃんと判定されます。

<p class="hello world">helloクラスがついている要素</p>

<p class="hello world">helloクラスがついている要素</p>

上記のHTMLコードでは、hello world という順でクラスをつけています。この場合 hasClass() の方にも全く同じように hello world と記述しないと true にはなりません。

順序を入れ替えたり間に別の文字列がある場合は false を返します。もし2つのクラスのうち1つを指定した場合は true を返します。

$('p').hasClass('world hello');
// 上記はfalse
$('p').hasClass('hello');
// 上記はtrue

$('p').hasClass('world hello');
// 上記はfalse
$('p').hasClass('hello');
// 上記はtrue

length | 特定の要素やクラスが存在するか

hasClass() は「とある要素にこのクラスがついていたら〜」という判定に使用できますが、「要素とクラスの相互関係なしに」クラスや要素が存在するかという判定をしたい場合は length プロパティを使用します。

if($('.top').length) {
  //top というclassが存在した場合
}
if($('#top').length) {
  //top というidが存在した場合
}
if($('blockquote').length) {
  //blockquote要素が存在した場合
}
if($('div.example').length) {
  //divタグかつexampleというクラスがある要素が存在した場合
}

if($('.top').length) {
  //top というclassが存在した場合
}
if($('#top').length) {
  //top というidが存在した場合
}
if($('blockquote').length) {
  //blockquote要素が存在した場合
}
if($('div.example').length) {
  //divタグかつexampleというクラスがある要素が存在した場合
}

【参考】Array.prototype.length – JavaScript | MDN