jQuery でデータ属性値を取得する

jQuery は、データ属性値を取得する 2つの方法を提供します。1つ目は .data() メソッドで、2つ目は .attr() メソッドです。 今日の投稿では、jQuery でデータ属性値を取得する方法について説明します。

.data() と .attr() を使用して jQuery でデータ属性値を取得する

data() または HTML5 data-* 属性によって設定されたデータは、.data() メソッドによって返されます。 このメソッドは、jQuery コレクションの最初の要素に関連付けられた任意のデータを返します。

パラメータを渡さない場合、.data() は JavaScript オブジェクトを返します。 この JavaScript オブジェクトには、保存された各値がリソースまたはアセットとして含まれています。

オブジェクトは、レコード値を取得するためにすぐに使用できます。

構文：

.data(key)

このメソッドは、キーとして格納されているデータの名前を受け入れます。 .data() メソッドの詳細については、.data() のドキュメントを参照してください。

一致した因子のセットの最初の詳細の特性の値を取得することもできます。 .attr() アプローチは、一致したセット内の最適なプライマリ要素の特性値を受け取ります。

すべての詳細の値を取得するには、jQuery の .each() または .map() メソッドを含むループ構造を使用できます。

構文：

.attr(attributeName)

このメソッドは、属性名を受け取り、属性に関連付けられたデータを取得します。 jQuery の .attr() メソッドを使用して要素の特性の値を取得することには、次の主な利点があります。

遅滞なく、jQuery オブジェクトで呼び出して、さまざまな jQuery メソッドにチェーンすることができます。 一部の属性の値は、ブラウザ全体で不均等に記述される場合があり、単一のブラウザのバージョン間でさえ不均等に記述される場合があります。 .attr() アプローチは、このような矛盾を減らします。

.attr() メソッドの詳細については、.attr() のドキュメントを参照してください。

次の例でそれを理解しましょう。

コード例:

<button data-id="btn-1" value="Hello">Hello World!</button>

console.log($('button').attr('data-id'));
console.log($('button').data('id'));

上記の例では、btn-1 に設定された data-id 属性と Hello の値を持つボタンを説明しました。 data() または attr() メソッドを使用すると、データ属性にアクセスできます。

jQuery をサポートするブラウザーで上記のコード スニペットを実行してみてください。 以下に結果を表示します。

出力：

"btn-1"
"btn-1"

上記のサンプル コードは こちら で実行できます。