JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのみで各li要素に個別のクラス名を追加する方法

JavaScriptでli要素にクラスを追加するには、forEach()とclassList.add()を組み合わせて使用します。jQueryなどのライブラリに頼らず、純粋なJavaScript（バニラJS）だけで各要素に個別のクラスを付与できるのがポイントです。

基本的な考え方

querySelectorAll()で対象の要素をすべて取得し、forEach()で1つずつループ処理を行います。ループのインデックス番号（i）を条件分岐に使うことで、特定の要素だけに異なるクラスを追加することも可能です。

サンプルコード

以下がそのコードです −

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
   .demo1 {
      color: yellow;
   }
   .demo2 {
      color: skyblue;
   }
</style>
<body>
<ul>
<li>Javascript</li>
<li>MySQL</li>
<li>Java</li>
<li>MongoDB</li>
</ul>
</body>
<script>
   addingClassUsingJavascript();
   function addingClassUsingJavascript() {
      const all = document.querySelectorAll('li');
      all.forEach(function (t, i) {
         if (i === 1) {
            t.classList.add('demo1');
         } else if (i === 2) {
            t.classList.add('demo2');
         }
      });
   }
</script>
</html>

コードの解説

このコードでは、document.querySelectorAll('li')ですべてのli要素を取得し、forEach()で順番に処理しています。インデックスが「1」（2つ目のli要素「MySQL」）の場合はdemo1クラスを、インデックスが「2」（3つ目のli要素「Java」）の場合はdemo2クラスを追加します。その結果、「MySQL」は黄色、「Java」は水色で表示される仕組みです。

実行方法

上記のプログラムを実行するには、ファイルを「anyName.html」（例：index.html）という名前で保存します。次に、VS Codeエディター上でそのファイルを右クリックし、「Open with Live Server」を選択してください。

出力

上記のコードを実行すると、以下のような出力が得られます −

JavaScriptのみで各li要素に個別のクラス名を追加する方法


  1. JavaScriptで要素からクラス名を削除する方法【classList.remove()の使い方】

    JavaScriptでHTML要素からクラス名（className）を削除するには、classList.remove()メソッドを使うのが最もシンプルで確実な方法です。このメソッドを使えば、対象の要素から指定したクラスを動的に取り除くことができ、ボタンのクリックなどユーザーの操作に応じてスタイルを切り替える際に非常に便利です。 サンプルコード 以下は、「Remove Class」ボタンをクリックすると、DIV要素からクラス名が削除される例です。 <!DOCTYPE html> <html> <head> <meta name="viewpor

  2. JavaScriptでUL（順序なしリスト）に改行付きで項目を追加する方法

    順序なしリスト（UL）に新しい項目を改行付きで追加するには、document.querySelector()とappend()メソッドを組み合わせて使用します。ユーザーが入力した値をli要素として動的にリストへ追加することで、各項目が新しい行に表示されます。以下に具体的なサンプルコードを示します。サンプルコード<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" co