Изменение коллекции элементов

Библиотека jQuery позволяет не только получать коллекцию элементов, а затем манипулировать ими, но и изменять эту первоначальную коллекцию в любой момент времени. Множество методов предоставляют возможность добавления новых элементов, фильтрации элементов, а также передвижения по дереву DOM. Рассмотрим эти методы подробно.

Получение части коллекции

Следующие методы позволяют получить часть коллекции:

  • first() — возвращает объект jQuery с первым элементом коллекции. Выделим первый абзац:
<p>Абзац 1</p>
<p>Абзац 2</p>
<p>Абзац 3</p>
$('p').first().css('color', 'red');
  • last() — возвращает объект jQuery с последним элементом коллекции. Выделим последний абзац:
<p>Абзац 1</p>
<p>Абзац 2</p>
<p>Абзац 3</p>
$('p').last().css('color', 'red');
  • eq(<Индекс>) — возвращает объект jQuery с элементом коллекции, имеющим указанный индекс. Если элемент не существует, то будет возвращен пустой объект jQuery, свойство length которого равно нулю. Выделим второй абзац:
<p>Абзац 1</p>
<p>Абзац 2</p>
<p>Абзац 3</p>
$('p').eq(1).css('color', 'red');

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

$('p').eq(-1).css('color', 'red');
  • even() — возвращает объект jQuery с элементами коллекции, имеющими четные индексы. Метод доступен, начиная с версии jQuery 3.5.0. В этом примере будут выделены абзацы 1 и 3:
<p>Абзац 1</p>
<p>Абзац 2</p>
<p>Абзац 3</p>
<p>Абзац 4</p>
$('p').even().css('color', 'red');
  • odd() — возвращает объект jQuery с элементами коллекции, имеющими нечетные индексы. Метод доступен, начиная с версии jQuery 3.5.0. В этом примере будут выделены абзацы 2 и 4:
<p>Абзац 1</p>
<p>Абзац 2</p>
<p>Абзац 3</p>
<p>Абзац 4</p>
$('p').odd().css('color', 'red');
  • slice() — позволяет получить срез коллекции. Возвращает новую коллекцию элементов. Имеет следующий формат:
slice(<Начальная позиция>[, <Конечная позиция>])

Следует учитывать, что нумерация позиций начинается с нуля, а конечная позиция не попадает в диапазон возвращаемых значений. Выделим первый абзац в коллекции:

$('p').slice(0, 1).css('color', 'red');

А теперь выделим только второй и третий абзацы:

$('p').slice(1, 3).css('color', 'red');

Если второй параметр не указан, то будут возвращены элементы от начальной позиции до конца коллекции. Выделим все абзацы, начиная с третьего:

$('p').slice(2).css('color', 'red');

В случае указания отрицательного значения позиции будут отсчитываться с конца коллекции. Выделим два последних абзаца:

$('p').slice(-2).css('color', 'red');

Пронумеруем все абзацы в документе с помощью метода slice():

var elem = $('p');
for (var i = 0, count = elem.length; i < count; i++) {
   elem.slice(i, i + 1).html('Абзац ' + i);
}
  • toArray() — позволяет преобразовать коллекцию элементов jQuery в массив DOM-элементов. Во всех тегах <p> выведем индекс текущего абзаца:
var arr = $('p').toArray();
for (var i = 0, count = arr.length; i < count; i++) {
   arr[i].innerHTML = i;
}

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

Помощь сайту

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

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