我有以下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变量打印为"未定义".但是,如果我将元标记重新排列为:
<head>
<meta data-id="0001" >
<meta data-status="stopped" >
<meta data-details="Example details" >
然后只有id变量将打印到控制台.
我错过了什么？
$('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');
该data()方法返回指定数据存储中的值,用于匹配元素集中的第一个元素,因此它总是尝试从第一个元素获取data-*值,并且未定义.
使用具有属性选择器来获取具有特定data-*属性的元标记.
var status = $('meta[data-status]').data('status'),
id = $('meta[data-id]').data('id'),
details = $('meta[data-details]').data('details');
console.log(status, id, details)<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">| 归档时间： |
|
| 查看次数： |
645 次 |
| 最近记录： |