cpp

Перебор элементов коллекции

В предыдущих главах мы научились получать коллекцию элементов с помощью функции $() и механизма селекторов. Большинство методов библиотеки jQuery позволяет изменить какое-либо свойство сразу всех элементов коллекции. Например, выведем во всех тегах <p> текст «Привет, мир!»:

$('p').text('Привет, мир!');

Это, конечно, удобно. Но иногда необходимо получить доступ к какому-либо отдельному элементу коллекции. Прежде чем обратиться к конкретному элементу, следует с помощью свойства length узнать количество элементов в коллекции:

console.log($('p').length);

Теперь, когда мы знаем количество элементов, можно приступить к перебору всех элементов коллекции.

Доступ к элементу по индексу

Получить доступ к элементу можно, указав его индекс в квадратных скобках. Нумерация начинается с нуля. В качестве примера выведем текст «Привет, мир!» только во втором теге <p>:

var elems = $('p');
if (elems.length >= 2) {
   elems[1].innerHTML = 'Привет, мир!';
}
else {
   console.log('Элемента для вывода нет!');
}

Обратите внимание на тот факт, что доступ по индексу возвращает ссылку на DOM-элемент. Поэтому изменить содержимое можно с помощью свойства innerHTML объекта document. Применить метод jQuery text() можно только после нахождения элемента:

$(elems[1]).text('Привет, мир!');

Вместо квадратных скобок можно использовать метод get(). Метод имеет следующий формат:

get([<Индекс элемента>])

Если индекс элемента не указан, то возвращается массив DOM-элементов:

var elems = $('p').get();
console.log('Количество DOM-элементов ' + elems.length);

Указание параметра позволяет получить доступ к конкретному элементу. Нумерация элементов начинается с нуля. В качестве примера во всех тегах <p> выведем индекс текущего абзаца:

var elems = $('p');
for (var i = 0, count = elems.length; i < count; i++) {
   elems.get(i).innerHTML = i;
}

Значение параметра метода get() может быть отрицательным. В этом случае отсчет производится с конца. Выведем сообщение в последнем абзаце, если он существует:

var p = $('p').get(-1);
if (p) p.innerHTML = 'Последний абзац';

Если элемент с указанным индексом не существует, то будет возвращено значение undefined.

Метод toArray() позволяет преобразовать коллекцию элементов jQuery в массив DOM-элементов. Во всех тегах <p> выведем индекс текущего абзаца:

var arr = $('p').toArray();
for (var i = 0, count = arr.length; i < count; i++) {
   arr[i].innerHTML = i;
}

Все рассмотренные способы позволяли получить доступ к конкретному DOM-элементу. Если необходимо получить доступ к элементу коллекции jQuery, то следует использовать метод eq(). Нумерация элементов начинается с нуля. В качестве примера во всех тегах <p> выведем индекс текущего абзаца, при этом используем метод jQuery html() вместо свойства innerHTML объекта document:

var elems = $('p');
for (var i = 0, count = elems.length; i < count; i++) {
   elems.eq(i).html(i);
}

Значение параметра метода eq() может быть отрицательным. В этом случае отсчет производится с конца. Выведем сообщение в последнем абзаце:

$('p').eq(-1).html('Последний абзац');

Если элемент с указанным индексом не существует, то будет возвращен пустой объект jQuery, свойство length которого равно нулю. Поэтому никаких проверок существования элемента производить не нужно. Ошибки при отсутствии абзаца не будет.

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

cpp