jquery: почему я могу получить только первый атрибут данных?

#jquery

Вопрос:

У меня есть следующий 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 переменные and выводятся как «неопределенные». Но если я изменю мета-теги на:

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

Тогда id на консоль будет выводиться только переменная.

Чего мне не хватает?

Ответ №1:

$('meta') возвращает массивоподобный объект jQuery, содержащий все три meta элемента.
$('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');

Ответ №2:

data() Метод возвращает значение в именованном хранилище данных для первого элемента в наборе сопоставленных элементов, поэтому он всегда будет пытаться получить значение data- * из первого элемента, которое не определено.

Используйте селектор атрибутов has, чтобы получить мета-тег с определенным атрибутом 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">

Развернуть фрагмент