Как получить в 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 () добавляем результат в конец к имеющемуся значению элемента.
|