Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Перебор элементов
В предыдущих главах мы научились получать коллекцию элементов с помощью функции $()
и механизма селекторов. Большинство методов библиотеки 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
Помощь сайту
Yandex-деньги: 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов