Содержимое элементов

Веб-программирование --- jQuery --- Содержимое элементов

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

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

С методом text() связана одна особенность: если он вызывается без аргументов, то возвращаемый им результат генерируется на основе содержимого всех выбранных элементов. В отличие от этого поведение метода html() согласуется с поведением остальных методов jQuery, и он возвращает лишь содержимое первого элемента выбранного набора, как показано в примере ниже:

$(function() {
        
    var html = $('div.dcell').html();
    console.log(html); 
	
});

В этом сценарии метод html() используется для считывания HTML-содержимого первого из элементов, соответствующих селектору div.dcell, и вывода на консоль результата, который представлен ниже. Обратите внимание на то, что HTML-дескрипторы самого элемента в возвращаемый результат не включаются:

Изменение содержимого элементов

Для изменения содержимого элементов используются методы html() и text(). В нашем примере документа для цветочного интернет-магазина сколько-нибудь значимое текстовое содержимое элементов отсутствует, поэтому в примере ниже показано лишь применение метода html() для этой цели:

$(function() {
        
    $('#row2 div.dcell').html($('div.dcell').html()); 
	
});

Этот сценарий изменяет HTML-содержимое тех принадлежащих классу dcell элементов div, которые являются потомками элемента row2. Для получения содержимого, подлежащего вставке, используется метод html(), который считывает HTML-содержимое из первого элемента div.dcell. Это приводит к тому, что каждое из изображений в нижнем ряду элементов заменяется изображением астры, как показано на рисунке:

Изменение содержимого элементов с помощью функции

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

Пример использования функции совместно с методом text() приведен ниже:

$(function() {
        
    $('label').css("border", "thick solid red").text(function(index, currentValue) {
        return "Индекс " + index;
    });
	
});

В этом сценарии текстовое содержимое элементов label изменяется в зависимости от значения аргумента index, указывающего позицию элемента в выбранном наборе (для заключения изменяемых элементов в рамку используется метод css()). Результат представлен на рисунке: