Question

我的网页上有一个div列表，所有div都包含数据属性data-duration。

当我在所有div上运行.data("duration")时，我得到第一个div的data-duration。当我在一个元素上运行它时，我得到一个错误。

以下是一个例子：

$(".reservation").data("duration")
>> 170
$(".reservation")[0].data("duration")
>> Uncaught TypeError: undefined is not a function

此代码也失败了：

$(".reservation").each(function(index, elem) {
  return console.log(elem.data("duration"));
});

我在单个元素上遇到与.attr("data-duration")类似的错误。

为什么我不能获得单个元素的数据属性？

Answer 1

您正在使用[]。

从jQuery集合中获取原始DOM元素

使用.eq(0)或first()获取第一个“jQuery”元素：

$(".reservation").eq(0).data("duration")

或

$(".reservation").first().data("duration")

你的第二段代码失败，因为你再次引用DOM元素（传递给elem）而不是jQuery：

请尝试使用this：http://jsfiddle.net/TrueBlueAussie/rd55sdbd/2/

$(".reservation").each(function() {
  console.log($(this).data("duration"));
});

Answer 2

每个方法的

elem都是纯HTML元素而不是jQuery对象，因此您的代码无效。请尝试以下代码。

HTML代码

<div class="reservation" data-duration="10"></div>
<div class="reservation" data-duration="20"></div>
<div class="reservation" data-duration="30"></div>
<div class="reservation" data-duration="40"></div>
<div class="reservation" data-duration="50"></div>

JavaScript代码：

$('.reservation').each(function(index,elem){
    alert($(elem).data('duration'));
});

JSFIDDLE

为什么.data（）可以处理元素集合，但不能处理单个元素？

2 个答案: