javascript - jQuery data() 和 attr() 方法，以及 JavaScript 数据集属性返回 undefined

Question

我有这个 HTML:

<span class="price" itemprop="price" content="66.00">66.00</span>

我试图获取范围内 content 数据属性的值，但我一直获取 undefined 而不是价格值.

我试过使用 $(".price").data("content"), $(".price").attr("content")、$(".price").prop("content") 和纯 JavaScript document.querySelector('.price').dataset.content；然而所有这些都返回undefined。

我获得实际值的唯一方法是当页面上只有一个产品时，我将 Id 添加到跨度并使用 document.getElementById('price')。 getAttribute("内容").

我创建了一个 JSFiddle:https://jsfiddle.net/01kqoje7/9/ .在这个 fiddle 中，attrPrice 变量是唯一提供值的变量，但在我的代码中，即使是 jQuery 的 attr() 也给我未定义的值。

当我尝试访问我的类的数据属性时，为什么我会得到未定义的信息？

附言我无法控制数据属性的命名约定。

Answer 1

如果您知道要查找的属性是 content，则可以使用 jQuery has attribute selector :

例如:

// will select ALL items with content attribute:  
$('[content]').attr('content');

如果你知道你只想要带有特定类的项目，你可以像这样组合类和属性选择器:

// will select items with content attribute that have the price class:
$('.price[content]').attr('content');

正如其他人提到的，使用 $('.price').data('content') 要求属性以 data- 为前缀(例如 data-content="66.00"), 这种情况不能使用。