Изучаем Java

Как получить в jQuery доступ к элементу по индексу

Итак, мы уже разобрались с тем, как получать коллекцию элементов с помощью функции $ () и механизма селекторов.

Большинство же методов библиотеки jQuery позволяет изменить какое-либо свойство сразу всех элементов коллекции. Например, выведем во всех тегах <р> текст "Добрый день!"

$ ("р") .text("Добрый день!") ;

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

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

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

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

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

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

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

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

$(elems[1]).text("Добрый день!");

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

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

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

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

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

var elems = $("р");
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 = $("р");
for  (var i=0,  count=elems.length;  i<count;  i++)   { elems.eq(i).html(i);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

$("р").click(function()   {
alert("Индекс:  " + $("р").index(this));
});
<р>Абзац 1</р> <р>Абзац 2</р> <р>Абзац 3</р> <р>Абзац 4</р>

Метод each()

Метод 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);
});

Если в параметре Элемент DOM указать переменную, то на каждой итерации в нее будет передаваться ссылка на текущий элемент DOM. Эту переменную можно использовать вместо указателя this.

$("div").each(function(i, d) {
$(d).html("DIV с индексом " + i);
});

Если внутри функции вернуть значение false, то выполнение метода each () будет остановлено. При индексе, равном двум, прервем выполнение метода.

$("div").each(function(i) {
$(this).html("DIV с индексом " + i);
if (i == 2) { return false;
}
});

Во всех этих примерах мы использовали анонимную функцию. Если необходимо вызвать обычную функцию, то ее имя указывается в качестве параметра метода each () без скобок.

function myFunc(i,  d)   {
$(d) .html("DIV с индексом " + i) ; if  (i == 2)   { return false;
}
}
$(document).ready(function()   { $("div").each(myFunc);
});

В качестве примера использования метода each () получим URL-адреса всех ссылок в документе (листинг 3.1).

Листинг 3.1.
Получение URL-адресов всех ссылок

<html>
<head>
<title>Получение URL-адресов всех ссылок</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
   $("a").each(function() {
      $("#div1").append($(this).attr("href") + "
");
   });
});
</script>
</head>
<body>
<a href="link1.html">Ссылка 1</a><br>
<a href="link2.html">Ссылка 2</a><br>
<a href="link3.html">Ссылка 3</a><br>
Все URL-адреса:<br>
<div id="div1"></div>
</body>
</html>

После загрузки структуры документа находим коллекцию всех тегов а ($ ("а")). Далее с помощью метода each () перебираем все элементы. В качестве параметра указываем анонимную функцию. На каждой итерации внутри анонимной функции доступен указатель (this) на текущий элемент коллекции. Находим текущий элемент ($ (this)) и с помощью метода attr () получаем значение параметра href (attr ("href")). Для вывода результата находим элемент с идентификатором divl ($ ("#divl")) и с помощью метода append () добавляем результат в конец к имеющемуся значению элемента.