使用jQuery获取数据属性

Question

<img />元素具有data-id属性，我想使用jQuery检索它。我相信.data()函数可以做到这一点。

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

问题：当我尝试使用.data('id')检索属性时，出现错误：

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

我哪里出错了？

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

Answer 1

像其他人说的那样，你的问题是.get(0)，它返回HTML元素本身，而不是jquery对象。要获取某个元素，请使用:eq伪选择器，如：

http://jsfiddle.net/gunderson/KLG3R/2/

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

Answer 2

您需要将数据用于jquery对象，get（0）将返回该元素。

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

检查以下小提琴

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

Answer 3

$('.photo').get(0)将返回HTMLImageElement，而不是jQuery对象，因此它没有方法.data。

你应该这样做：$('.photo').data('id')

Answer 4

使用.attr（）函数。像

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

Answer 5

您使用jQuery .get()在这种情况下需要使用.eq()。您还使用.data()来存储dom上的数据。您需要使用.attr()，这样您才能访问元素的属性。

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

这应该适合你：http://jsfiddle.net/KLG3R/4/

Answer 6

1. 元素有两种类型。那是DOM对象和jQuery对象;
2. jQuery对象有data()方法，而像xx..get(0)这样的DOM对象没有方法data();
3. 因此，如果要使用data()方法，则必须确保该对象是jQuery对象。