HTML要素にデータ属性を追加する方法：jQueryとネイティブJavaScript編

2024-06-30

jQueryを使ってHTML要素にカスタムデータ属性を追加する方法

attr() メソッドは、HTML要素の属性を取得・設定するために使用されます。カスタムデータ属性を追加する場合も、このメソッドを使用することができます。

構文

$(selector).attr("data-attribute-name", "attribute-value");

例

$(document).ready(function() {
  // 要素IDが "my-element" である要素に、data-id属性に "123" という値を設定します
  $("#my-element").attr("data-id", "123");

  // 要素クラスが "my-class" であるすべての要素に、data-active属性に "true" という値を設定します
  $(".my-class").attr("data-active", "true");
});

注意点

attr() メソッドで設定する値は、常に文字列として扱われます。数値を設定したい場合は、あらかじめ文字列に変換する必要があります。
既存のカスタムデータ属性を更新するには、同じ名前の属性を再度設定すれば上書きされます。

data() メソッドは、jQuery内部のデータキャッシュにデータを格納・取得するために使用されます。カスタムデータ属性も、このキャッシュに格納することができます。

$(selector).data("data-attribute-name", "attribute-value");

$(document).ready(function() {
  // 要素IDが "my-element" である要素から、data-id属性の値を取得します
  var dataId = $("#my-element").data("data-id");
  console.log(dataId); // 123を出力

  // 要素クラスが "my-class" であるすべての要素に、data-active属性に "true" という値を設定します
  $(".my-class").data("data-active", true);

  // 要素IDが "my-element" である要素から、data-active属性の値を取得します (真偽値として取得)
  var isActive = $("#my-element").data("data-active");
  console.log(isActive); // trueを出力
});

data() メソッドで設定する値は、データ型に関わらずそのまま格納されます。

どちらのメソッドを使うべき？

一般的に、以下のケースでそれぞれのメソッドを使い分けることをおすすめします。

HTML属性としてカスタムデータ属性を扱いたい場合: attr() メソッドを使用します。
JavaScriptやjQuery内でカスタムデータ属性を主に利用する場合: data() メソッドを使用します。

上記に加えて、パフォーマンスを考慮する場合、頻繁に読み書きを行うカスタムデータ属性の場合は data() メソッド、そうでない場合は attr() メソッドを使用する、という指針も存在します。

jQueryを使ってHTML要素にカスタムデータ属性を追加するには、attr() と data() の2つのメソッドを使用することができます。それぞれのメソッドの特徴を理解し、目的に合った方法を選択することが重要です。

jQueryでカスタムデータ属性を追加するサンプルコード

attr() メソッドを使用する場合

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQueryでカスタムデータ属性を追加</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <p id="my-element" data-id="123">要素1</p>
  <p class="my-class" data-active="false">要素2</p>
  <p class="my-class" data-active="true">要素3</p>

  <script>
    $(document).ready(function() {
      // 要素IDが "my-element" である要素に、data-description属性に "詳細説明" という値を追加します
      $("#my-element").attr("data-description", "詳細説明");

      // 要素クラスが "my-class" であるすべての要素に、data-order属性に 番号 を設定します
      var i = 1;
      $(".my-class").each(function() {
        $(this).attr("data-order", i++);
      });
    });
  </script>
</body>
</html>

このコードを実行すると、以下のようになります。

要素IDが "my-element" である要素には、data-description="詳細説明" という属性が追加されます。
要素クラスが "my-class" であるすべての要素には、data-order という属性が追加され、それぞれに 1, 2, 3 という番号が設定されます。

data() メソッドを使用する場合

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQueryでカスタムデータ属性を追加</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <p id="my-element" data-id="123">要素1</p>
  <p class="my-class" data-active="false">要素2</p>
  <p class="my-class" data-active="true">要素3</p>

  <script>
    $(document).ready(function() {
      // 要素IDが "my-element" である要素から、data-id属性の値を取得してコンソールに出力します
      var dataId = $("#my-element").data("data-id");
      console.log(dataId); // 123を出力

      // 要素クラスが "my-class" であるすべての要素に、data-active属性に true という値を設定します
      $(".my-class").data("data-active", true);

      // 要素IDが "my-element" である要素のdata-active属性の値を真偽値として取得してコンソールに出力します
      var isActive = $("#my-element").data("data-active");
      console.log(isActive); // trueを出力
    });
  </script>
</body>
</html>

コンソールに 123 と出力されます。これは、要素IDが "my-element" である要素の data-id 属性の値です。
要素クラスが "my-class" であるすべての要素の data-active 属性の値が true に変更されます。

上記はあくまで基本的な例です。実際の使用例では、必要に応じてコードを修正・拡張する必要があります。

jQuery以外の方法でHTML要素にカスタムデータ属性を追加する方法

ネイティブJavaScriptを使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ネイティブJavaScriptでカスタムデータ属性を追加</title>
</head>
<body>
  <p id="my-element">要素1</p>
  <p class="my-class">要素2</p>
  <p class="my-class">要素3</p>

  <script>
    // 要素IDが "my-element" である要素に、data-description属性に "詳細説明" という値を追加します
    var element = document.getElementById("my-element");
    element.dataset.description = "詳細説明";

    // 要素クラスが "my-class" であるすべての要素に、data-order属性に 番号 を設定します
    var elements = document.querySelectorAll(".my-class");
    for (var i = 0, len = elements.length; i < len; i++) {
      elements[i].dataset.order = i + 1;
    }
  </script>
</body>
</html>

このコードは、jQueryを使用せずにネイティブJavaScriptでカスタムデータ属性を追加する方法を示しています。

属性操作ライブラリを使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>DOMattributesライブラリでカスタムデータ属性を追加</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/domattributes.min.js"></script>
</head>
<body>
  <p id="my-element">要素1</p>
  <p class="my-class">要素2</p>
  <p class="my-class">要素3</p>

  <script>
    // 要素IDが "my-element" である要素に、data-description属性に "詳細説明" という値を追加します
    domAttributes.set("#my-element", "data-description", "詳細説明");

    // 要素クラスが "my-class" であるすべての要素に、data-order属性に 番号 を設定します
    var elements = document.querySelectorAll(".my-class");
    for (var i = 0, len = elements.length; i < len; i++) {
      domAttributes.set(elements[i], "data-order", i + 1);
    }
  </script>
</body>
</html>

このコードは、DOMattributesライブラリを使用してカスタムデータ属性を追加する方法を示しています。

データ属性用のHTML属性を使用する

HTML5には、data-* という接頭辞を持つ属性が用意されています。これらの属性は、カスタムデータ属性として使用することができます。

<p id="my-element" data-id="123" data-description="詳細説明">要素1</p>
<p class="my-class" data-active="false">要素2</p>
<p class="my-class" data-active="true">要素3</p>