Работа с выборкой

Применение селекторов и фильтров возвращает нам набор элементов, к которому мы можем применить различные свойства и методы. Также поскольку набор элементов представляет собой массив, то мы можем обращаться с ним как с массивом.

Количество выбранных элементов. Свойство length и метод size

Свойство length возвращает нам количество выбранных элементов: var num = $("tr:nth-child(odd)").length;

Альтернативой является использование метода size, который также возвращает число выбранных элементов: var num = $("tr:nth-child(odd)").size();

Получение элемента

Поскольку возвращаемый в процессе выборки набор данных фактически является массивом, то мы можем получать элементы выборки по индексу: var firstElement = $("tr:nth-child(odd)")[0];. Например:

$(function(){
	var array = $("tr:even");
	for(var i=0;i<array.length;i++){
		console.log(i.toString()+". " +array[i].innerHTML);
	}
});

Альтернативой является использование метода get(index), который в качестве параметра принимает индекс элемента: var elem = $("tr:even").get(0);.

Функция eq

Еще одним способом обратиться к элементу является функция eq(index). Это функция в качестве параметра получает индекс элемента и возвращает из новый набор, состоящий из одного элемента по данному индексу. Например:

$(function(){
	var array = $("tr:even");
	array.eq(1).css('background-color', 'silver');
	array.eq(-1).css('background-color', 'silver');
});

Преимуществом такого подхода является то, что мы можем для результата функции eq использовать методы jQuery (например, css для установки стиля, как в данном случае).

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

Получение первого и последнего элемента

Поскольку разработчикам довольно часто приходилось в своих задачах получать последний и особенно первый элемент, то разработчики jQuery добавили специальные методы для их выборки: last и first соответственно.

$(function(){
	var array = $("tr:even");
	var firstEl = array.first();
	console.log("Первый элемент: " + firstEl.html());
	var lastEl = array.last();
	console.log("Последний элемент: " + lastEl.html());
});

Перебор элементов выборки

Кроме перебора в виде обычного массива в цикле, как в вышеприведенном варианте, мы можем использовать специальный метод each:

$(function(){
	$("tr:even").each(function(index, elem){
		console.log(index + ". " + elem.innerHTML);
	});
});

В метод each в качестве параметра передается безымянная функция, которая принимает два параметра: index - индекс элемента в наборе и elem - сам элемент.

Индекс элемента

Для определения индекса элемента в jQuery предназначен метод index(элемент). В качестве параметра мы передаем элемент, индекс которого мы хотим определить:

$(function(){
	var array = $("tr:even");
	var firstEl = array.first();
	var index = array.index(firstEl);
	console.log(index); //выведет 0
});

Также метод index может принимать в качестве параметра результат выборки функции jQuery:

$(function(){
	var array = $("tr");
	var index = array.index($("tr.tabhead"));
	console.log(index);
});

Получение селектора

С помощью свойства selector мы можем получить селектор выборки:

$(function(){
	var array = $("tr:even");
	console.log(array.selector); //выведет tr:even
});

Метод add и добавление новых элементов

С помощью метода add мы можем создать новый набор. Данный метод имеет следующие варианты синтаксиса:

• add(селектор): добавление элементов, соответствующих селектору, в набор

• add(селектор, контекст): добавление элементов, но в данном случае поиск элементов ведется в рамках контекста

• add(элемент): добавление в набор элемента

• add(массив элементов): добавление массива элементов

• add(html): добавление в набор элемента, представленного разметкой html (при этом добавление идет только в набор, а не на страницу)

• add(jQuery): добавление объекта, который является результатом функции jQuery

Например, создадим начальную выборку из четных строк таблицы и добавим в нее первую строку из нечетных строк таблицы:

$(function(){
	var array = $("tr:even").add("tr:odd:first");
	//данное выражение эквивалентно следующему
	// var array = $("tr:even, tr:odd:first");
});

В то же время вместо метода add мы могли бы применить набор селекторов, который бы нам дал тот же результат.