【jQuery】クラスの有無で処理を分岐させる方法

Web開発において、特定のクラスを持つ要素に対して異なる処理を適用する場面は多々あります。jQueryを使用すれば、このような処理の分岐を非常に簡単に実装することができます。この記事では、その方法を2つのアプローチで紹介します。

hasClass()メソッドの基本
セレクタと.lengthプロパティを活用する方法
サンプル
まとめ

hasClass()メソッドの基本

最も一般的な方法として、hasClass()メソッドを使用するアプローチがあります。

if ($('#elementId').hasClass('yourClassName')) {
    // クラスが存在する場合の処理
} else {
    // クラスが存在しない場合の処理
}

この方法では、指定した要素が特定のクラスを持っているか簡単に確認することができます。

セレクタと.lengthプロパティを活用する方法

次に、セレクタと.lengthプロパティを組み合わせた方法です。

if ($('#elementId.yourClassName').length) {
    // クラスが存在する場合の処理
} else {
    // クラスが存在しない場合の処理
}

この方法は、特定のクラスを持つ要素を直接セレクトして、その数（.length）に基づいて処理を分岐させます。

サンプル

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Dark Mode Toggle with jQuery</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="themeContainer" class="light-mode">
    <h1>Welcome to My Website</h1>
    <button id="toggleTheme">Toggle Dark Mode</button>
</div>

<script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.light-mode {
    background-color: white;
    color: black;
}

.dark-mode {
    background-color: black;
    color: white;
}

JavaScript (script.js)

$(document).ready(function() {
    $('#toggleTheme').on('click', function() {
        const container = $('#themeContainer');

        if (container.hasClass('dark-mode')) {
            container.removeClass('dark-mode').addClass('light-mode');
        } else {
            container.removeClass('light-mode').addClass('dark-mode');
        }
    });
});

このサンプルコードでは、ボタンをクリックするたびに「.dark-mode」クラスの有無をチェックして、テーマをダークモードとライトモードの間で切り替えます。

まとめ

jQueryを利用することで、特定のクラスの有無に応じた処理の分岐を効率的に実装することができます。プロジェクトのニーズに応じて、上記の方法のいずれかを選択し、柔軟なWeb開発を進めてください。