Управление выбором элементов
В большинстве случаев использование jQuery представляет собой довольно четкую двухступенчатую модель поведения (паттерн). На первой стадии выбираются некоторые элементы, а на второй стадии совершается одна или несколько операций с ними. В этой главе я сфокусируюсь на первой стадии, покажу вам, как управлять выборкой jQuery и использовать ее для собственных целей. Также я покажу вам, как пользоваться jQuery для управления DOM. В обоих случаях мы начнем с одной выборки и будем совершать операции с ней, пока она не будет содержать только требуемые элементы. Как вы увидите, взаимосвязь между элементами, с которых мы начнем, и элементами, которыми мы закончим, может быть простой или сложной. В таблице 6-1 представлено краткое содержание этой главы.
Таблица 6-1: Краткое содержание главы
Задача | Решение | Листинг |
Расширить выборку | Использовать метод add |
1 |
Сократить выборку до одного элемента | Использовать методы first , last или eq |
2 |
Сократить выборку до определенного диапазона элементов | Использовать метод slice |
3 |
Сократить выборку с применением фильтра | Использовать методы filter или not |
4, 5 |
Сократить выборку с использованием элементов-потомков | Использовать метод has |
6 |
Создать новую выборку из существующей | Использовать метод map |
7 |
Проверить, что хотя бы один выбранный элемент соответствует нужному условию | Использовать метод is |
8 |
Вернуться к предыдущей выборке | Использовать метод end |
9 |
Добавить предыдущую выборку к текущей выборке | Использовать метод andSelf |
10 |
Перейти к дочерним элементам и потомкам выбранных элементов | Использовать методы children и find |
11, 12, 13 |
Перейти к родителям выбранных элементов | Использовать метод parent |
14 |
Перейти к предкам выбранных элементов | Использовать метод parents |
15 |
Перейти к предкам выбранных элемента, пока не встретится указанный элемент | Использовать метод parentsUntil |
16, 17 |
Перейти к ближайшему предку, который соответствует селектору или который является указанным элементом | Использовать метод closest |
18, 19 |
Перейти к ближайшему предку | Использовать метод offsetParent |
20 |
Перейти к сестринским элементам выбранного элемента | Использовать метод siblings |
21, 22 |
Перейти к предыдущим или следующим сестринским элементам выбранного элемента | Использовать методы next , prev , nextAll , prevAll , nextUntil или prevUntil |
23 |
Создание новой выборки из имеющейся при помощи метода map