Открыть меню    

Связываем данные с элементом, атрибут 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

Здесь я каждому элементу списка добавил атрибут данных 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" */

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

Добавить комментарий