为什么 .data(） 适用于一组元素，但不适用于单个元素

Why does .data() work on a set collection of elements, but not on a single element?

本文关键字：适用于 元素 不适用 单个 data 为什么 一组      更新时间：2023-09-26

我的网页上有一个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")时遇到类似的错误。

为什么我无法获取单个元素的数据属性？

你正在使用 [] 从 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"));
});

每个方法的elem都是纯HTML元素而不是jQuery对象，因此您的代码无法正常工作。请尝试以下代码。

网页代码 

<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'));
});

吉斯菲德尔

相关文章：