Pro jQuery

Pro jQuery

Адам Фриман

Сужение выборки

Несколько методов позволяют убрать элементы из выборки. Они описаны в таблице 6-3. В каждом случае методы возвращают новый объект jQuery, который содержит уменьшенную выборку элементов. Объект jQuery, для которого вызывался метод, остается неизменным.

Таблица 6-3: Методы для фильтрации элементов
Метод Описание
eq(index) Убирает все элементы, кроме одного с указанным индексом
filter(condition) Убирает элементы, которые не соответствуют указанному условию. См. дальнейшую информацию об аргументах, которые можно использовать с этим методом
first() Убирает все элементы, кроме первого
has(selector)
has(jQuery)
has(HTMLElement)
has(HTMLElement[])
Убирает элементы, которые не имеют потомков, соответствующих указанной выборке или JQuery объекту, или чьи потомки не включают в себя указанные HTMLElement объекты
last() Убирает все элементы, кроме последнего
not(condition) Убирает все элементы, которые соответствуют указанному условию. См. дальнейшую информацию, как указывается условие
slice(start, end) Убирает все элементы за пределами указанного диапазона значений индекса

Сужение выборки до указанного элемента

Три основных метода сокращения выборки – это first, last и eq. Эти три метода позволяют выбрать указанный элемент, основываясь на его расположении в объекте jQuery. В листинге 6-2 представлен пример.

Листинг 6-2: Уменьшение выборки на основании расположения элемента
<script type="text/javascript">...
	$(document).ready(function () {

		var jq = $('label');

		// select and operate on the first element
		jq.first().css("border", "thick double red");

		// select and operate on the last element
		jq.last().css("border", "thick double green");

		// select and operate on an element by index
		jq.eq(2).css("border", "thick double black");
		jq.eq(-2).css("border", "thick double black");
	});
</script>
...

Обратите внимание, что я дважды вызвал метод eq. Если аргумент этого метода число положительное, индекс считается от первого элемента в объекте jQuery. Если аргумент – число отрицательное, то отсчет идет от последнего элемента в обратную сторону. Результат работы этого скрипта показан на рисунке 6-2.

Рисунок 6-2: Сужение выборки до указанного элемента

Сужение выборки до определенного диапазона элементов

Метод slice позволяет сузить выборку до определенного диапазона элементов в пределах указанных индексов. В листинге 6-3 представлен пример.

Листинг 6-3: Использование метода slice
...
<script type="text/javascript">
	$(document).ready(function () {

		var jq = $('label');

		jq.slice(0, 2).css("border", "thick double black");
		jq.slice(4).css("border", "thick solid red");
	});
</script>
...

Аргументами метода slice являются индекс, с которого начинается выборка, и индекс, которым она заканчивается. Отсчет индексов начинается с нуля, поэтому результатом выборки по аргументам, которые я использовал в примере (0 и 2), будут первые два элемента. Если опустить второй аргумент, то выборка продолжится до конца этого ряда элементов. Определив один аргумент 4 для набора из шести элементов, я выбрал последние два элемента (значения индексов которых равны 4 и 5). На рисунке 6-3 представлен результат работы этого скрипта.

Рисунок 6-3: Сужение выборки до определенного диапазона элементов

Фильтрация элементов

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

Таблица 6-4: Типы аргументов для метода filter
Аргументы Описание
filter(selector) Удаляет элементы, которые не соответствуют селектору
filter(HTMLElement) Удаляет все, кроме указанного элемента
filter(jQuery) Удаляет элементы, которые не содержатся в указанном объекте jQuery
filter(function(index)) Функция вызывается для каждого элемента. И те элементы, для которых функция возвращает false, удаляются

В листинге 6-4 показаны все четыре способа использования фильтрации.

Листинг 6-4: Использование фильтрации
...
<script type="text/javascript">
	$(document).ready(function () {
		// remove elements whose src attribute contains the letter 's'
		$('img').filter('[src*=s]').css("border", "thick double red");

		// remove elements that don't contain the letter p
		var jq = $('[for*=p]');
		$('label').filter(jq).css("color", "blue");

		// remove elements that are not the specified element
		var elem = document.getElementsByTagName("label")[1];
		$('label').filter(elem).css("font-size", "1.5em");

		// remove elements using a function
		$('img').filter(function (index) {
			return this.getAttribute("src") == "peony.png" || index == 4;
		}).css("border", "thick solid red")
	});
</script>
...

Первые три способа ясны и очевидны. Можно использовать метод фильтрации с селектором, другим объектом jQuery или объектом HTMLElement в качестве параметров. Четвертый способ, который основывается на function, требует более детального пояснения. Это та часть скрипта, которую я выделил в листинге.

jQuery вызывает функцию один раз для каждого элемента, содержащегося в объекте jQuery. Если метод возвращает true, элемент, для которого была вызвана функция, остается. Если возвращается false, элемент удаляется. В функцию передается один параметр, это индекс элемента, для которого была вызвана функция. Кроме того, переменная this указывает на объект HTMLElement, который нужно обработать. В этом листинге я возвращаю true для элемента с конкретным значением атрибута src и для элемента с указанным индексом.

Совет

Вы можете удивиться тому, что я использовал метод getAttribute для HTMLElement в функции фильтрации, в отличие от вызова свойства src. Причина в том, что метод getAttribute возвращает значение, которое я потом устанавливаю для атрибута src (это относительная ссылка). А свойство src возвращает абсолютную ссылку. В этом примере проще работать с относительной ссылкой.

Противоположным методу filter является метод not, который работает таким же образом, только "переворачивает" процесс фильтрации. В таблице 6-5 показаны различные варианты применения метода not.

Таблица 6-5: Типы аргументов для метода not
Аргументы Описание
not(HTMLElement)
not(HTMLElement[])
Удаляет указанный элемент или элементы
not(jQuery) Удаляет элементы, которые содержатся в указанном объекте jQuery
not(function(index)) Функция вызывается для каждого элемента. И те элементы, для которых функция возвращает true, удаляются

В листинге 6-5 показано использование метода not, в основу взят предыдущий пример.

Листинг 6-5: Использование функции not
...
<script type="text/javascript">
	$(document).ready(function () {

		$('img').not('[src*=s]').css("border", "thick double red");

		var jq = $('[for*=p]');
		$('label').not(jq).css("color", "blue");

		var elem = document.getElementsByTagName("label")[1];
		$('label').not(elem).css("font-size", "1.5em");

		$('img').not(function (index) {
			return this.getAttribute("src") == "peony.png" || index == 4;
		}).css("border", "thick solid red")
	});
</script>
...

Результат работы этого скрипта можно увидеть на рисунке 6-4. Он противоположен предыдущему результату.

Рисунок 6-4: Фильтрация элементов с использованием метода not

Сокращение выборки при использовании элементов-потомков

Можно использовать метод has, чтобы сократить выборку до элементов, у которых есть конкретные элементы-потомки, с указание селектора или одного и более HTMLElement объектов. В листинге 6-6 показано использование метода has.

Листинг 6-6: Использование метода has
...
<script type="text/javascript">
	$(document).ready(function () {

		$('div.dcell').has('img[src*=astor]').css("border", "thick solid red");

		var jq = $('[for*=p]');
		$('div.dcell').has(jq).css("border", "thick solid blue");
	});
</script>
...

В этом скрипте я сократил выборку, удалив элементы, у которых нет конкретных потомков. В первом случае, где я использовал селектор, я удалил элементы, у которых нет минимум одного элемента-потомка img со значением src атрибута равному astor. Во втором случае, где я использовал объект jQuery, я удалил элементы, у которых нет минимум одного потомка, значение атрибута for которого содержит букву р. Результат работы этого скрипта можно увидеть на рисунке 6-5.

Рисунок 6-5: Использование метода has для уменьшения выборки
или RSS канал: Что новенького на smarly.net