Pro jQuery

Адам Фриман

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

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

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

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

...
<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 показаны все четыре способа использования фильтрации.

...
<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 и для элемента с указанным индексом.

Противоположным методу filter является метод not, который работает таким же образом, только "переворачивает" процесс фильтрации. В таблице 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.

...
<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 канал: