Отримуємо в jQuery доступ до елементу за індексом
Як отримати в jQuery доступ до елементу за індексом
Отже, ми вже розібралися з тим, як отримувати колекцію елементів за допомогою функції $ () і механізму селектор.
Більшість же методів бібліотеки jQuery дозволяє змінити будь-яку властивість відразу всіх елементів колекції. Наприклад, виведемо в усіх тегах <р> текст "Добрий день!"
$ ( "Р") .text ( "Добрий день!");
Це, звичайно, зручно. Але іноді необхідно отримати доступ до будь-якого окремого елементу колекції. Перш ніж звернутися до конкретного елементу, слід за допомогою властивості length дізнатися кількість елементів в колекції,
Крім того, можна скористатися методом size ().
Тепер, коли ми знаємо кількість елементів, можна приступити до перебору всіх елементів колекції.
Отримати доступ до елементу можна, вказавши його індекс в квадратних дужках. Нумерація починається з нуля. Як приклад виведемо текст "Добрий день!" тільки в другому тезі р.
var elems = $ ( "р");
if (elems.size ()> = 2) elems [1] .innerHTML = "Добрий день!";
>
else alert ( "Елементи для виведення немає!");
>
Зверніть увагу на той факт, що доступ за індексом повертає посилання на DOM-елемент. Тому змінити вміст можна за допомогою властивості innerHTML об'єкта document. Застосувати метод jQuery text () можна тільки після знаходження елемента.
Замість квадратних дужок можна використовувати метод get (). Метод має наступний формат.
get ([<Индекс элемента>])
Якщо індекс елемента не вказано, то повертається масив DOM-елементів,
var elems = $ ( "р"). get ();
alert ( "Кількість DOM-елементів" + elems.length);
Вказівка параметра дозволяє отримати доступ до конкретного елементу. Нумерація елементів починається з 0. Як приклад у всіх тегах р виведемо індекс поточного абзацу.
Всі розглянуті способи дозволяли отримати доступ до конкретного DOM-елементу. Якщо необхідно отримати доступ до елементу колекції jQuery, то слід використовувати метод eq (). Нумерація елементів починається з 0. Переробимо наш попередній приклад і використовуємо метод jQuery html () замість властивості innerHTML об'єкта document,
Метод slice () дозволяє отримати зріз колекції. Повертає нову колекцію елементів. Мають такий вигляд.
slice (<Начальная позиция>[, <Конечная позиция>])
Слід враховувати, що нумерація позицій починається з 0, а кінцева позиція не потрапляє в діапазон значень, що повертаються. Виділимо перше посилання в колекції.
$ ( "А") .slice (0,1) .css ( "color", "red");
А тепер виділимо лише другу і третю посилання.
Якщо другий параметр не вказано, то будуть повернуті елементи від початкової позиції до кінця колекції. Виділимо всі посилання, починаючи з третьої.
$ ( "А") .slice (2) .css ( "color", "red");
У разі зазначення від'ємного значення позиції будуть відраховуватися з кінця колекції. Виділимо дві останні посилання.
$ ( "А") .slice (-2) .css ( "color", "red");
Пронумеруємо всі посилання в документі за допомогою методу slice ().
За допомогою методу index () можна отримати індекс елемента на сторінці. Якщо елемент не знайдений, то повертається значення -1. Нумерація елементів починається з нуля. Метод має наступний формат,
При натисканні на абзаці виведемо його індекс.
$ ( "Р"). Click (function () alert ( "Індекс:" + $ ( "р"). Index (this));
>);
<р>абзац 1 <р>абзац 2 <р>абзац 3 <р>абзац 4
Метод each () дозволяє перебрати всі елементи колекції без використання циклів. Повинен виглядати так,
each (Функція зворотного виклику)
function <Название функции> ([<Индекс> [, <Элемент DOM>]])
Всі параметри є необов'язковими. Якщо в параметрі Індекс вказати змінну, то на кожній ітерації в неї буде передаватися поточний індекс елемента в колекції. Нумерація починається з 0. Виведемо індекс елемента в усіх тегах div.
$ ( "Div"). Each (function (i) this.innerHTML = "DIV з індексом" + i;
>);
Поточний елемент доступний всередині функції через покажчик this. Зверніть увагу, покажчик this посилається на поточний елемент об'єктної моделі документа, а не на елемент колекції jQuery. З цієї причини застосовувати методи jQuery для цього елемента не можна. В останньому прикладі для виведення тексту всередині тегів div ми використовували властивість innerHTML об'єкта document, а не метод з бібліотеки jQuery. Якщо необхідно використовувати методи з бібліотеки jQuery, то попередньо слід знайти елемент за допомогою функції $ (). Як приклад замінимо властивість innerHTML на jQuery-метод html ().
$ ( "Div"). Each (function (i) $ (this) .html ( "DIV з індексом" + i);
>);
$ ( "Div"). Each (function (i, d) $ (d) .html ( "DIV з індексом" + i);
>);
Якщо всередині функції повернути значення false, то виконання методу each () буде зупинено. При індексі, рівному двом, перервемо виконання методу.
У всіх цих прикладах ми використовували анонімну функцію. Якщо необхідно викликати звичайну функцію, то її ім'я вказується як параметр методу each () без дужок.
Після завантаження структури документа знаходимо колекцію всіх тегів а ($ ( "а")). Далі за допомогою методу each () перебираємо всі елементи. Як параметр вказуємо анонімну функцію. На кожній ітерації всередині анонімної функції доступний покажчик (this) на поточний елемент колекції. Знаходимо поточний елемент ($ (this)) і за допомогою методу attr () отримуємо значення параметра href (attr ( "href")). Для виведення результату знаходимо елемент з ідентифікатором divl ($ ( "#divl")) і за допомогою методу append () додаємо результат в кінець до наявного значенням елемента.