Оглавление

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

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

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. В качестве примера во всех тегах <р> выведем индекс текущего абзаца.

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>

Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити