jQuery を使用した data-id 属性へのアクセス

jQuery Quicksand プラグインを使用する場合、多くの場合、クリックされた要素の「data-id」属性を取得する必要があります。さまざまな Web サービスに情報を渡します。この属性値を効果的に取得する方法は次のとおりです。

「data-id」属性には、jQuery の .attr() メソッドを使用してアクセスできます。構文は次のとおりです。

$(this).attr("data-id")

この式は、'data-id' 属性の値を文字列として返します。

たとえば、クリックされた要素に次の HTML がある場合:

次の jQuery コードは、「data-id」属性を取得します:

$("#list li").on('click', function() {
  // Get the data-id value
  var dataId = $(this).attr("data-id");
  // Use the dataId value as needed
});

また、jQuery バージョン 1.4.3 以降では .data() メソッドを使用することもできます。 .data() メソッドは、「data-id」値を文字列ではなくネイティブ JavaScript タイプ (数値、ブール値など) として返します。

$(this).data("id")

.data() メソッドを使用する場合、「data-」の後の部分は小文字にする必要があることに注意してください。たとえば、「data-idNum」は失敗しますが、「data-idnum」は成功します。