jQuery If DIV Doesn't Have Class "x" の4つの方法

jQueryでDIV要素に特定のクラスがない場合の処理

not()セレクターを使う

not()セレクターは、指定されたセレクターにマッチしない要素を選択します。例えば、以下のコードは、div要素の中で、selectedクラスがない要素にのみhoverイベントを設定します。

$(document).ready(function() {
  $('div').not('.selected').hover(function() {
    // マウスオーバー時の処理
  }, function() {
    // マウスアウト時の処理
  });
});

hasClass()メソッドを使う

hasClass()メソッドは、要素が特定のクラスを持っているかどうかをチェックします。以下のコードは、div要素にselectedクラスがない場合のみ、addClass()メソッドを使ってselectedクラスを追加します。

$(document).ready(function() {
  $('div').each(function() {
    if (!$(this).hasClass('selected')) {
      $(this).addClass('selected');
    }
  });
});

filter()メソッドを使う

$(document).ready(function() {
  $('div').filter(':not(.selected)').addClass('selected');
});

これらの方法のどれを使うかは、状況によって使い分けてください。

HTML:

<div id="my-div">
  これはdiv要素です。
</div>

JavaScript:

$(document).ready(function() {
  // `not()`セレクターを使う例
  $('#my-div').not('.selected').hover(function() {
    // マウスオーバー時の処理
    $(this).addClass('selected');
  }, function() {
    // マウスアウト時の処理
    $(this).removeClass('selected');
  });

  // `hasClass()`メソッドを使う例
  if (!$('#my-div').hasClass('selected')) {
    $('#my-div').addClass('selected');
  }

  // `filter()`メソッドを使う例
  $('#my-div').filter(':not(.selected)').addClass('selected');
});

このコードを実行すると、#my-div要素にselectedクラスがない場合、以下の処理が実行されます。

• マウスオーバー時にselectedクラスが追加され、背景色が変わります。

上記はあくまでも一例です。ご自身の用途に合わせて、コードを修正してください。

div:not(.selected) {
  /* マウスオーバー時のスタイル */
}

div:not(.selected):hover {
  /* マウスオーバー時のスタイル */
}

JavaScriptの条件分岐を使って、div要素にselectedクラスがないかどうかをチェックし、処理を分岐させることができます。

$(document).ready(function() {
  var div = $('#my-div');

  if (!div.hasClass('selected')) {
    // 処理
  }
});

.toggleClass()メソッドは、要素にクラスがある場合は削除し、ない場合は追加します。以下のコードは、#my-div要素にselectedクラスがない場合、selectedクラスを追加します。

$(document).ready(function() {
  $('#my-div').toggleClass('selected');
});