javascript - jQuery を使用してデータ属性を取得する

Question

<img />要素には、data-idjQuery を使用して取得したい属性があります。私は.data()関数がこれを行うことができると信じています。

$('.photo').get(0).data('id')

問題:.data('id')を使用して属性を取得しようとすると、次のエラーが発生します。

Uncaught TypeError: Object #<HTMLImageElement> has no method 'data'

どこで私は間違えましたか？

jsfiddle: http://jsfiddle.net/KLG3R/

score 5 · Accepted Answer

他の人が言ったように、あなたの問題は.get(0)、jquery オブジェクトではなく HTML 要素自体を返すことです。特定の要素を取得するには、次の:eqような疑似セレクターを使用します。

$('#result').html( $('.photo:eq(0)').data('id') );

score 0 · Accepted Answer

jquery オブジェクトにデータを使用する必要があり、get(0) は要素を返します。

$('#result').html( $('.photo').data('id') );

以下のフィドルを確認してください

score 0 · Accepted Answer

$('.photo').get(0)は jQuery オブジェクトではなくを返すためHTMLImageElement、メソッドはありません.data。

あなたはただやるべきです：$('.photo').data('id')

score 0 · Accepted Answer

0

.attr() 関数を使用します。お気に入り

$('#result').html( $('.photo').attr('data-id') );

于 2012-12-17T03:22:09.380 に答える

score 0 · Accepted Answer

要素には 2 つのタイプがあります。それが DOM オブジェクトと jQuery オブジェクトです。
jQueryオブジェクトにはdata()メソッドがありますが、あなたのようなDOMオブジェクトにはメソッドxx..get(0)がありませんdata();
したがって、data()メソッドを使用する場合は、オブジェクトが jQuery オブジェクトであることを確認する必要があります。

score 0 · Accepted Answer

この場合、jQuery.get()を使用する必要があります。.eq()また.data()、DOMにデータを保存するために使用されるものも使用します。.attr()要素の属性にアクセスするには、これを使用する必要があります。

$(function () {
    var photos = $('.photo');
    $('#result').html(photos.eq(0).attr('data-id'));
});

これでうまくいくはずです: http://jsfiddle.net/KLG3R/4/

6 に答える 6