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: Добавление текстового содержания с использованием функции