Перебор элементов

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

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

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

alert($("p").length);

Кроме того, можно воспользоваться методом size().

alert($("p").size());

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Метод slice() позволяет получить срез коллекции. Возвращает новую коллекцию элементов. Имеет следующий формат.

slice(<Начальная позиция>[, <Конечная позиция>])

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

$("a").slice(0,1).css("color", "red");

А теперь выделим только вторую и третью ссылки.

$("a").slice(1,3).css("color", "red");

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

$("a").slice(2).css("color", "red");

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

$("a").slice(-2).css("color", "red");

Пронумеруем все ссылки в документе с помощью метода slice().

var elem = $("a");
for (var i=0, count=elem.size(); i<count; i++) {
   elem.slice(i,i+1).html("Ссылка " + i);
}

С помощью метода index() можно получить индекс элемента на странице. Если элемент не найден, то возвращается значение –1. Нумерация элементов начинается с нуля. Метод имеет следующий формат.

index(<DOM-элемент>)

При щелчке на абзаце выведем его индекс.

$("p").click(function() {
   alert("Индекс: " + $("p").index(this));
});

<p>Абзац 1</p>
<p>Абзац 2</p>
<p>Абзац 3</p>
<p>Абзац 4</p>

Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF