Pro jQuery

Pro jQuery

Адам Фриман

Работа с содержанием элемента

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

Таблица 8-6: Методы для работы с содержанием элемента
Метод Описание
text() Получает объединенное текстовое содержание всех элементов в объекте jQuery и их потомков
text(value) Устанавливает содержание для каждого элемента в объекте jQuery
html() Получает HTML содержание первого элемента в объекте jQuery
html(value) Устанавливает HTML содержание для каждого элемента в объекте jQuery
text(function)
html(function)
Устанавливает текстовое или HTML содержание с использованием функции

Необычным в jQuery является то, что если вы используете метод text без аргументов, то полученный результат будет сгенерирован для всех выбранных элементов. Метод html же схож с другими подобными методами и возвращает содержание только первого элемента, как показано в листинге 8-24.

Листинг 8-24: Использование метода html для получения содержания элемента
<script type="text/javascript">
	$(document).ready(function () {
		var html = $('div.dcell').html();
		console.log(html);
	});
</script>

Этот скрипт использует метод html для прочтения HTML содержания первого элемента, подходящего селектору div.dcell. Результат выведен на консоль. Обратите внимание, что HTML самого элемента не включен.

<img src="astor.png">
<label for="astor">Astor:</label>
<input name="astor" value="0" required="">

Добавление содержания элемента

Можно добавить элементу содержание, используя как метод html, так и метод text. В моем примере цветочного магазина нет существенного текстового содержания, поэтому в листинге 8-25 показано, как использовать метод html.

Листинг 8-25: Использование метода html для добавления содержания элементу
<script type="text/javascript">
	$(document).ready(function () {
		$('#row2 div.dcell').html($('div.dcell').html());
	});
</script>

Этот скрипт устанавливает HTML содержание элементам div класса dcell, которые являются потомками элемента row2. Чтобы получить содержание, я использовал метод html и прочел HTML первого элемента div.dcell. Это привело к тому, что ячейки нижнего ряда заполнились содержанием ячейки с астрой, как показано на рисунке 8-15.

Рисунок 8-15: Добавление содержания элементу при помощи метода html

Добавление содержания элемента с использованием функции

Как и многие другие методы в этой главе, методы html и text можно использовать с функцией, чтобы динамически установить контекст. В обоих случаях аргументами являются индекс элемента в объекте jQuery и текущее текстовое или HTML содержание. Переменная this указывает на HTMLElement объект элемента, и возвращенным результатом функции является значение, которое вы хотите установить. В листинге 8-26 показано, как можно использовать функцию с методом text.

Листинг 8-26: Добавление текстового содержания с использованием функции
<script type="text/javascript">
	$(document).ready(function () {
		$('label').css("border", "thick solid red").text(function (index, currentValue) {
			return "Index " + index;
		});
	});
</script>

В этом скрипте я устанавливаю текстовое содержание для элементов label, используя значение индекса (я также использую метод css, чтобы добавить рамку для элементов, которые я меняю). Результат можно увидеть на рисунке 8-16.

Рисунок 8-16: Добавление текстового содержания с использованием функции
или RSS канал: Что новенького на smarly.net