Связывание данных с элементами

Веб-программирование --- jQuery --- Связывание данных с элементами

»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.

Библиотека jQuery позволяет связывать с элементами произвольные данные, которые впоследствии можно извлекать и тестировать. Перечень предназначенных для этого методов содержится в таблице ниже:

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

Пример установки, тестирования, получения и удаления данных, связанных с элементами, приведен ниже:

$(function() {
        
    // установить данные
    $('img').each(function () {
        $(this).data("product", $(this).siblings("input[name]").attr("name"));
    });
    
    // найти элементы с данными и получить значения
    $('*').filter(function() {
        return $(this).data("product") != null;
    }).each(function() {
        console.log("Элемент: " + this.tagName + " , связанное значение: " + $(this).data("product")); 
    });
    
    // удалить все данные
    $('img').removeData();
	
});

В этом сценарии можно выделить три отдельных этапа выполнения. На первом этапе метод data() используется для связывания элемента данных с ключом product. Данные получаются путем перехода от каждого элемента img к его сестринскому элементу input с атрибутом name.

На втором этапе сначала выбираются все элементы в документе, а затем с помощью метода filter() находятся те из них, у которых имеется значение, связанное с ключом product. Далее осуществляется перебор этих элементов с помощью метода each() и вывод данных на консоль. Здесь бросается в глаза, что операции дублируются, но я хотел продемонстрировать наилучшую методику выбора элементов, с которыми связаны данные. Специально предназначенных для этого селекторов или методов не существует, поэтому мы решаем данную задачу путем использования метода filter() совместно с функцией.

Наконец, метод removeData() используется для удаления всех данных из всех элементов img. Консольный вывод выглядит следующим образом:

Пример установки, тестирования, получения и удаления данных, связанных с элементами

Работа с атрибутами данных HTML5

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

Метод data() позволяет автоматически получать и изменять атрибуты данных, как показано в примере ниже:

<!DOCTYPE HTML>
...
<script>	
$(function() {
        
    $('div.dcell').each(function () {
       var productVal = $(this).data("product");
       console.log("Product: " + productVal);
    });
	
});
</script>
...
</head>
<body>
    <h1>Цветочный магазин</h1>
    <form method="post">
        <div id="oblock">        
            <div class="dtable">
                <div id="row1" class="drow">
                      <div class="dcell" data-product="astor">
                            <img src="http://professorweb.ru/downloads/jquery/astor.png"/>
                            <label for="astor">Астра:</label>
                            <input name="astor" value="0" required>
                      </div>
                      <div class="dcell" data-product="daffodil">
                            <img src="http://professorweb.ru/downloads/jquery/daffodil.png"/>
                            <label for="daffodil">Нарцисс:</label>
                            <input name="daffodil" value="0" required >
                      </div>
                      <div class="dcell" data-product="rose">
                            <img src="http://professorweb.ru/downloads/jquery/rose.png"/>
                            <label for="rose">Роза:</label>
                            <input name="rose" value="0" required>
                      </div>                
                </div>
                     
            </div>
        </div>
        <div id="buttonDiv"><button type="submit">Заказать</button></div>    
    </form>
...

В этом примере атрибуты данных HTML5 добавляются в усеченную версию нашего образца документа. В сценарии сначала выбираются элементы с атрибутами данных, а затем связанные с элементами данные извлекаются с помощью метода data() и выводятся на консоль. Заметьте, что в имени атрибута префикс data- опущен — в качестве ссылки на атрибут data-product в сценарии используется просто product. На консоль выводится следующий результат:

Извлечение данных из атрибутов данных HTML5

Метод data() учитывает атрибуты данных и при установке значений. Если вы указываете некоторый ключ, например product, то метод data() проверяет, существует ли соответствующий атрибут данных HTML5, например data-product. Если это так, то указанное вами значение присваивается атрибуту. В противном случае данные сохраняются внутри jQuery.