Umbrella - にほんご。

hasClass

更新日: 2018-02-09

.hasClass(name1, name2, nameN..)

マッチした要素に、指定したクラスが含まれているかをどうか調べます。 複数のクラスを指定した場合、以下のようなAND条件として処理されます。

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

パラメータ

name1, name2, nameN..: string, array, object, function
マッチした要素に含まれるクラス名(またはクラス名を含んだ変数)。 このパラメータはいくつかの種類の型を受け取ることができます。
.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'; });

戻り値

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" class="">Click me</button>

関連項目

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

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


© 2014 Francisco Presencia Released under the MIT license

このコンテンツはFrancisco Presencia(franciscop)によるUmbrella JSドキュメントを翻訳/改変したものです。