Связываем данные с элементом, атрибут data, метод jQuery data

Библиотека jQuery позволяет привязывать данные к элементу. Эти данные вы можете извлекать и использовать в своем сценарии. Существуют специальные методы:

Метод	Описание
`data(ключ, значение)`	Связываем пару 'ключ-значение' с объектом jQuery
`data(объект)`	Связываем несколь пар 'ключ-значение' с объектом jQuery
`data(ключ)`	Возвращаем значение указанного ключа, для первого элемента объекта jQuery
`data()`	Возвращаем пару 'ключ-значение' для первого элемента объекта jQuery
`removeData(ключ)`	Удаляем данные для указанного ключа у всех элементов присутствующих в объекте jQuery

HTML5 также позволяет привязывать данные к элементу, но при помощи специальных атрибутов, так называемых атрибутов данных (data attributes). Атрибуты данных используют префикс data. После префикса data-, как правило, следует осмысленное имя ключа. Чтобы понять принцип работы обратимся к простому примеру:

HTML

<ul class="list-for-data">
    <li  data-title_item="Первый">
        Я первый элемент списка
    </li>
    <li  data-title_item="Второй">
        Я второй элемент списка
    </li>
    <li  data-title_item="Третий">
        Я третий элемент списка
    </li>
    <li  data-title_item="Четвертый">
        Я четвертый элемент списка
    </li>
</ul>

jQuery


$(document).ready(function(){

    $('.list-for-data li').each(function(i,el){

        console.log("Атрибут data-title_item  элемента "+parseInt(i + 1)+" равен "+$(el).data('title_item'));

    });

});

Я первый элемент списка
Я второй элемент списка
Я третий элемент списка
Я четвертый элемент списка

Здесь я каждому элементу списка добавил атрибут данных data-title_item, затем я при помощи метода jQuery data() вывожу в консоли значения атрибута для каждого элемента списка. Вы можете открыть консоль в своем браузере и удостовериться в правдивости моих слов. Отметьте, что в имени атрибута префикс data- не используется. В качестве ссылка на атрибут data-title_item используется title_item.

Метод data() учитывает значение атрибута данных html5: если такой атрибут присутствует, то новое значение присваивается соответствующему атрибуту, если нет, то сохраняется внутри jQuery.

dataset

jQuery


<div data-value="true" data-company-name="il.ru" />

element.dataset.value /* "true" */
element.dataset.companyName /* "il.ru" */
$(element).data("value") /* "true" */
$(element).data("companyName") /* "il.ru" */

Связываем данные с элементом, атрибут data, метод jQuery data

dataset

Комментарии к статье