Question

我有以下jQuery：

var status = $('meta').data('status'), 
    id = $('meta').data('id'), 
    details = $('meta').data('details');           
    console.log(status, id, details);

和以下HTML，

<head>
    <meta data-status="stopped" > 
    <meta data-id="0001" >
    <meta data-details="Example details" >

并且只有status变量会打印到控制台，而id和details变量会打印为＆＃39; undefined＆＃39;。但是，如果我将元标记重新排列为：

<head>
        <meta data-id="0001" >
        <meta data-status="stopped" > 
        <meta data-details="Example details" >

然后只有id变量将打印到控制台。

我错过了什么？

Answer 1

$('meta')返回包含所有三个meta元素的类似jQuery数组的对象 $('meta').data('status')会返回第一个元素的data-status属性值，并且工作正常。
但是，$('meta').data('id')也尝试读取第一个元素的数据属性id，但是没有。

您需要将所有数据属性合并到一个元组中。

<meta data-status="stopped" data-id="0001" data-details="Example details"/>

这样，您可以（假设它是您文档中的第一个meta标记）

var status = $('meta').data('status'), 
    id = $('meta').data('id'), 
    details = $('meta').data('details');

另一种方法是在选择器中使用属性：

<meta data-status="stopped" > 
<meta data-id="0001" >
<meta data-details="Example details" >

var status = $('meta[data-status]').data('status'), 
    id = $('meta[data-id]').data('id'), 
    details = $('meta[data-details]').data('details');

Answer 2

data() 方法返回指定数据存储区中匹配元素集中第一个元素的值，因此它总是尝试从第一个元素获取data- *值哪个是未定义的。

使用has attribute selector获取具有特定data- *属性的元标记。

＆＃13;

var status = $('meta[data-status]').data('status'),
  id = $('meta[data-id]').data('id'),
  details = $('meta[data-details]').data('details');
console.log(status, id, details)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta data-status="stopped">
<meta data-id="0001">
<meta data-details="Example details">

＆＃13;

jquery：为什么我只能得到第一个数据属性？

2 个答案: