jQuery

jQueryでdata属性の取得・追加・変更する方法

本記事では、jQueryでdata属性の取得・追加・変更する方法について解説しています。

jQueryの学習におすすめ参考書
jQuery最高の教科書

本書情報
著者株式会社シフトブレイン
発売日2013/11/26
ページ数320ページ
Kindle版
レビュー
(Amazon)
(93件)

参考書が苦手な人はUdemyの動画がおすすめ
即実践 手を動かして6時間でjQueryをマスターしよう。
知識、経験ゼロからjQueryを使いこなそう

動画情報
作成者村守 康
学習時間6時間
受講者数28,547人
レビュー (425件)
動画の詳細はこちら

data属性の操作

HTMLに独自に付けられるdata属性を取得・追加・変更するには、dataメソッドまたはattrメソッドを使用します。

data属性の取得

data属性をdataメソッドで取得する方法は以下のとおりです。

$("対象要素").data();
$("対象要素").data("データ属性名");

dataメソッドを使用してdata属性を取得する場合、引数に何も指定しないまたは引数に取得したいデータ属性名を指定します。

引数に何も指定しない場合、取得したデータはオブジェクト形式で返されます。また、対象要素に複数のデータ属性が付与されている場合、全てのデータ属性を取得することが出来ます。引数に取得したいデータ属性名を指定した場合、オブジェクト形式ではなく文字列として返されます。

data属性をattrメソッドで取得する方法は以下のとおりです。

$("対象要素").attr("data-データ属性名");

attrメソッドを使用してdata属性を取得する場合、data-データ属性名と全て記述する必要があります。dataメソッドのようにdata-を省略することは出来ません。

data属性を取得するサンプルコードと実行結果は以下のとおりです。

<p id="el" data-name="apple">りんご</p>
const data1 = $("#el").data();
console.log(data1); // -> { "name": "apple" }

const data2 = $("#el").data("name");
console.log(data2); // -> "apple"

const data3 = $("#el").attr("data-name");
console.log(data3); // -> "apple"

data属性の追加&変更

data属性の追加と変更する方法は全く同じです。

data属性をdataメソッドで追加・変更する方法は以下のとおりです。

$("対象要素").data("プロパティ名", "値");

dataメソッドを使用してdata属性を追加・変更する場合、第一引数にプロパティ名を指定し第二引数に値を設定します。

data属性をattrメソッドで追加・変更する方法は以下のとおりです。

$("対象要素").attr("プロパティ名", "値");

attrメソッドを使用してdata属性を追加・変更する場合、dataメソッドと同様に第一引数にプロパティ名を指定し第二引数に値を設定します。また、第一引数のプロパティは取得時と同様にdata-は省略することが出来ません。

data属性を追加・変更するサンプルコードと実行結果は以下のとおりです。

<p id="el" data-name="apple">りんご</p>
$("#el").data("color","blue");
console.log($("#el").data("color")); // -> "blue"

$("#el").data("color","red");
console.log($("#el").data("color")); // -> "red"


$("#el").attr("data-price", "200");
console.log($("#el").attr("data-price")); // -> "200"

$("#el").attr("data-price", "300");
console.log($("#el").attr("data-price")); // -> "300"

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村