要素がjQueryで特定のクラス名を持っているかどうかをチェックする方法

getdocs

7年前

jQueryには、要素に特定のクラス名があるかどうかを確認する2つのメソッドがあります。どちらの方法も同じ機能を持っています。

is（ ‘. classname’）
hasClass（ ‘. classname’）

例えば、div要素のクラス名が ‘red Color’であるかどうかを調べる。

1.は（ ‘. classname’）です

$('div').is('.redColor')

2. hasClass（ ‘. classname’）

$('div').hasClass('.redColor')

例

div要素のクラス名が ‘redColor’の場合、そのクラスを ‘blueColor’に変更します。

<html>
<head>
<style type="text/css">
  .redColor {
    background:red;
  }
  .blueColor {
    background:blue;
  }
 </style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
  <h1>jQuery check if an element has a certain class</h1>

  <div class="redColor">This is a div tag with class name of "redColor"</div>

  <p>
  <button id="isTest">is('.redColor')</button>
  <button id="hasClassTest">hasClass('.redColor')</button>
  <button id="reset">reset</button>
  </p>
<script type="text/javascript">

    $("#isTest").click(function () {

      if($('div').is('.redColor')){
        $('div').addClass('blueColor');
      }

    });

    $("#hasClassTest").click(function () {

      if($('div').hasClass('.redColor')){
        $('div').addClass('blueColor');
      }

    });

    $("#reset").click(function () {
      location.reload();
    });


</script>
</body>
</html>

リンク://wp-content/uploads/jQuery/jQuery-check-has-css-class.html[デモを試してください]

jquery