Версия для печати. Взято с сайта phpsql.ru

На главную   Назад   Вперед

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

В предыдущих главах мы научились получать коллекцию элементов с помощью функ-ции $ () и механизма селекторов. Большинство методов библиотеки 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</р>

 
Предыдущая   На главную   Следующая