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

jQuery позволяет связать условные данные с элементом, которые можно потом проверить и извлечь. В таблице 8-8 представлены методы, выполняющие эту задачу.

Таблица 8-8: Методы для работы с условными данными элемента

Метод	Описание
`data(key, value)` `data(map)`	Связывает одну или более пар ключ/значение с элементами в объекте `jQuery`
`data(key)`	Получает значение, связанное с указанным ключом, первого элемента в объекте `jQuery`
`data()`	Получает пары ключ/значение для первого элемента в объекте `jQuery`
`removeData(key)`	Удаляет данные, связанные с указанным ключом из всех элементов в объекте `jQuery`
`removeData()`	Удаляет все данные из всех элементов в объекте `jQuery`

Заметка
Если вы используете метод clone, данные, которые вы связали с элементами, удаляются из вновь созданных копий, пока вы точно не укажете jQuery, что хотите их сохранить. Смотрите главу 7 для информации о методе clone и о том, как сохранить данные.

В листинге 8-30 показано добавление, тестирование, прочтение и удаление данных.

Листинг 8-30: Работа с данными

<script type="text/javascript">
	$(document).ready(function () {

		// set the data
		$('img').each(function () {
			$(this).data("product", $(this).siblings("input[name]").attr("name"));
		});

		// find elements with the data and read the values
		$('*').filter(function () {
			return $(this).data("product") != null;
		}).each(function () {
			console.log("Elem: " + this.tagName + " " + $(this).data("product"));
		});

		// remove all data
		$('img').removeData();

	});
</script>

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

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

И наконец, я использую removeData, чтобы удалить все данные из всех элементов img. Этот скрипт выводит на консоль следующий результат:

Elem: IMG astor
Elem: IMG daffodil
Elem: IMG rose
Elem: IMG peony
Elem: IMG primula
Elem: IMG snowdrop

Работа с data-атрибутами (атрибутами данных) HTML5

Спецификация HTML5 также определяет data-атрибуты (атрибуты данных), которые также позволяют связывать данные с элементами. У атрибутов данных, также известных как расширенные атрибуты, перед именами есть префикс data, и они полезны, когда добавляется специальное значение элементу сверх того, чего можно добиться при работе с классами. Метод data получает и устанавливает значения data-атрибутов автоматически, как показано в листинге 8-31.

Листинг 8-31: Использование метода data с data-атрибутами HTML5

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<script src="jquery-1.7.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<script type="text/javascript">
		$(document).ready(function () {
			$('div.dcell').each(function () {
				var productVal = $(this).data("product");
				console.log("Product: " + productVal);
			});
		});
	</script>
</head>
<body>
	<h1>Jacqui's Flower Shop</h1>
	<form method="post">
		<div id="oblock">
			<div class="dtable">
				<div id="row1" class="drow">
					<div class="dcell" data-product="astor">
						<img src="astor.png" /><label for="astor">Astor:</label>
						<input name="astor" value="0" required />
					</div>
					<div class="dcell" data-product="daffodil">
						<img src="daffodil.png" /><label for="daffodil">Daffodil:</label>
						<input name="daffodil" value="0" required />
					</div>
					<div class="dcell" data-product="rose">
						<img src="rose.png" /><label for="rose">Rose:</label>
						<input name="rose" value="0" required />
					</div>
				</div>
			</div>
		</div>
		<div id="buttonDiv">
			<button type="submit">Place Order</button></div>
	</form>
</body>
</html>

В этом примере я добавил data-атрибуты HTML5 в сокращенную версию примера документа. Этот скрипт выбирает элементы с data-атрибутами и использует метод data, чтобы получить связанные значения и вывести их на консоль. Обратите внимание, что я опустил часть data- имени атрибута, например, я обратился к data-product просто как к product. Вот результат выполнения скрипта:

Product: astor
Product: daffodil
Product: rose

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

8.7. Резюме

или RSS канал: