hasClass

.hasClass(name1, name2, nameN..)

マッチした要素に、指定したクラスが含まれているかをどうか調べます。

.hasClass('name1');
.hasClass('name1 name2 nameN');
.hasClass('name1,name2,nameN');
.hasClass('name1', 'name2', 'nameN');
.hasClass(['name1', 'name2', 'nameN']);
.hasClass(['name1', 'name2'], ['name3'], ['nameN']);
.hasClass(function(){ return 'name1'; });
.hasClass(function(){ return 'name1'; }, function(){ return 'name2'; });

複数のクラスを指定した場合、以下のようなAND条件として処理されます。

u("a").hasClass("button") && u("a").hasClass("primary");

パラメータ

name1, name2, nameN..: string, array, object, function

マッチした要素に含まれるクラス名(またはクラス名を含んだ変数)。 このパラメータはいくつかの種類の型を受け取ることができます。

戻り値

boolean

渡された全てのクラス名が一致する要素が見つかったらtrueを返します。 見つからなかった場合はfalseを返します。

例

ORパラメータを使って複数のクラスをチェックすることができます。

u('a').is('.button, .primary');

ANDパラメータの場合は以下のようになります。

u('a').is('.button.primary');

ステータスに応じてボタンの色を切り替えます。

<a class="example button">Click me</a>

<script src="//umbrellajs.com/umbrella.min.js"></script>
<script>
  u(".example").on('click', function() {
    if(u(this).hasClass("error")) {
      u(this).removeClass("error").html("Click me");
    } else {
      u(this).addClass("error").html("Confirm");
    }
  });
</script>

デモ

"Click me"ボタンを押すたびに、ボタンの色を切り替えます。

JavaScript

u('#demo').on('click', function() {
  if(u(this).hasClass('error')) {
    u(this).removeClass('error').html('Click me');
  } else {
    u(this).addClass('error').html('Confirm');
  }
});

CSS

.error {
  background-color: #FCE4EC;
}

HTML

<button id="demo" type="button">Click me</button>

関連項目

.addClass()マッチした全ての要素にクラスを追加します。

.removeClass()マッチした要素から、指定したクラスを削除します。