Навигация по элементам в jQuery
В этой статье рассмотрим методы jQuery для поиска в DOM-дереве необходимых элементов, связанных с элементами текущего набора определёнными отношениями.
find() – выбор потомков
Указать искомые элементы можно посредством селектора, ссылки на DOM-элементы или набора jQuery. В качестве результата этот метод возвращает новый объект jQuery, состоящий из найденных элементов.
children() – выбор дочерних элементов
children() в отличие от find() выполняет поиск элементов только среди детей каждого элемента текущего набора (т.е. не опускается ниже одного уровня по DOM-дереву).
Для выбора всех дочерних элементов для каждого элемента текущего набора children() необходимо вызвать без аргументов:
Если необходимо выбрать не все, а только определённые, то можно использовать селектор.
Например, выберем не все элементы, а только
closest() – выбор ближайшего предка
Если более точно, то closest() выбирает для каждого элемента текущего набора первый элемент, соответствующий указанному (поиск начинается с самого элемента, а потом вверх по предкам).
Для указания искомый элементов можно использовать селектор, ссылку на DOM-элементы и набор jQuery.
Например, выбрать
- в качестве ближайшего предка для элементов текущего набора:
next() – выбор следующего элемента
При этом следующий элемент по отношению к исходному должен являться сиблингом (или другими словами находиться с ним на одном уровне вложенности). В качестве результата next() возвращает новый объект jQuery, состоящий из найденных элементов.
Если необходимо выбрать не конкретный элемент, а просто следующий, то в этом случае вызывать next() необходимо без аргументов:
prev() – выбор предыдущего элемента
siblings() – выбор сиблингов
При этом, если нужно выбрать не все, а только определённые сиблинги, то можно указать соответствующий селектор. В качестве результата siblings() возвращает новый набор jQuery, состоящий из найденных элементов.
parent() – получение родителя
При необходимости в parent() мы можем передать селектор и тем самым указать, что нам нужны только элементы соответствующие ему.
При необходимости можно выбрать не всех предков, а только тех, которые соответствует указанному селектору.
Ограничить подъём по дереву DOM при получении предков можно посредством parentsUntil() :
Например, получим предков являющимися
offsetParent() – получение ближайшего позиционированного предка
Этот метод может использоваться в операциях расчета смещений для выполнения анимации и размещения объектов на странице.
Например, найдём offsetParent для элемента с классом active :
В jQuery метод children() используется, когда нужно получить все дочерние узлы (элементы, текстовые узлы и комментарии) для каждого элемента текущего набора.
Этот метод не принимает никаких аргументов.
jQuery: поиск элементов
Поиск в jQuery
Простейший поиск элементов выглядит так:
Возможны и более сложные запросы, например:
Перебор результатов
jQuery-объект также называют «jQuery-коллекцией», «элементами, обёрнутыми в jQuery» и десятком других жаргонных терминов.
Используем jQuery, чтобы выбрать все элементы по селектору li > a и перебрать их:
Контекст поиска
Например, найдём все a внутри #menu:
Второй аргумент в этом случае называются «контекстом поиска».
В качестве контекста можно передать не только DOM-элемент, но и селектор:
Также можно передать результат другого поиска:
Не важно, в каком виде мы хотим указать контекст: DOM-элемент, строка или результат поиска — jQuery понимает всё.
Здесь все немного сложнее, но, тем не менее, интуитивно понятно.
Если в контексте много элементов, то поиск будет произведён в каждом из них. А затем результаты будут объединены.
Повторы элементов при этом отфильтровываются, то есть два раза один и тот же элемент в результате не появится.
Метод each
Для более удобного перебора у jQuery-коллекции есть метод each. Его синтаксис похож на forEach массива:
Используем его вместо for, чтобы перебрать коллекцию найденных ссылок:
Можно было бы использовать это, чтобы сделать код короче:
Получение конкретного элемента
Даже если элемент найден только один, всё равно результатом поиска будет jQuery-коллекция. Но нам же нужен один элемент, так что посмотрим, как его получить.
Для получения одного элемента из jQuery-коллекции есть три способа:
Прямой доступ по номеру:
Это — самый быстрый и прямой доступ, он использует внутреннюю структуру jQuery-коллекции: элементы там хранятся по индексам. Но этим он нарушает принцип инкапсуляции.
Вообще-то, в jQuery есть специальные методы для получения элемента по номеру, и сейчас мы будем говорить о них.
Если элемента с таким номером нет — вызов get возвратит undefined.
Метод eq(индекс) возвращает коллекцию из одного элемента — с данным номером. Он отличается от метода get(индекс) и прямого обращения по индексу тем, что возвращает именно jQuery-коллекцию с одним элементом, а не сам элемент.
Во втором случае вызов eq создаёт новую jQuery-коллекцию, добавляет в нее нулевой элемент и возвращает. Это удобно, если мы хотим дальше работать с этим элементом, используя методы jQuery.
Если элемента с таким номером нет — eq возвратит пустую коллекцию.
«Сцепление» вызовов
Почти все методы jQuery-объекта возвращают jQuery-объект — либо новый, либо тот на котором вызваны.
Поэтому можно вызывать методы один за другим.
Это называют «сцепление» вызовов, или «чейнинг» (от англ. «chaining»):
Для удобства чтения каждый новый вызов в чейнинге идёт с отступом и с новой строки.
Итого
Определение и применение
Обращаю Ваше внимание, что функция обратного вызова, переданная в качестве параметра метода find() не будет вызвана для пропущенных элементов массива. Метод find() не изменяет массив для которого он был вызван.
Диапазон элементов, обрабатываемых с помощью метода find() устанавливается перед первым вызовом функции обратного вызова. Если элементы были добавлены к массиву после её вызова, то на таких элементах функция вызвана не будет.
Если значения существующих элементов массива изменяются в момент выполнения, то в качестве передаваемого значения функции будет значение в тот момент времени, когда метод find() посещает их. Если элементы удаляются до их посещения, то такие элементы будут посещены.
Поддержка браузерами
| Метод | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|
.find() | 38.0 | 28.0 | 25.0 | 7.1 | Нет | 12.0 |
JavaScript синтаксис:
Версия JavaScript
Значения параметров
Если в качестве параметра метода передается что-то, что не является объектом функции, то будет вызвано исключение TypeError. Обязательный параметр.
Пример использования
В следующем примере с использованием JavaScript метода find() мы проверим содержится ли в массиве число меньше ноля:
В следующем примере мы рассмотрим использование второго аргумента метода find(), который указывает на объект, на который мы можем ссылаться с использованием ключевого слова this внутри функции обратного вызова:
jQuery Find Method – The Complete Tutorial for Programmers
Note – Use comma (,) in order to separate each value that you want to find.
Use * to find all the descendants of the selector.
jQuery Find Method Examples
Suppose you have to find all the li elements from the below HTML :
To do this use jQuery Find method like:
Now in the same HTML, I will find the li element that contains the findMe CSS class.
The HTML of the page:
3. Use Comma (,) in jQuery Find to Return Multiple Descendants
Use comma (,) in order to find multiple descendants. Consider this HTML:
4. Use * in jQuery Find to Return All Descendants
By using * you can find all the descendants of the selector. Consider the HTML shown below:
I use (*) in jQuery Find method to select all of its descendants:
The Code will change the color of all ul, li and p elements to red.
Suppose you have to find the direct child of a selector. Here you can create the direct child expression with (>) and then find the element/elements.
Here only the Second Span will be colored red as it is the direct child of li element.
You can also pass jQuery Object for the filter value.
See the below example where I am finding all the span elements using jQuery Object.
By using jQuery Object for filter value you can build sharp codes in just one of the two lines.
Suppose there is a paragraph that contains number of links. You want to highlight only those links that are linking to a certain website.
Let the paragraph be:
To do this I first create a jQuery Object that contains all ‘DuckDuckGo’ links. Then I keep this jQuery Object in the filter value of my jQuery Find Method.
Here is the code that does this work.
In just 2 lines I managed to change the color of DuckDuckGo links to red.
Isn’t this a great feature to have in jQuery?
Please check the download link given below:
jQuery find() Method
Example
Return all elements that are descendants of
- :
Definition and Usage
The find() method returns descendant elements of the selected element.
A descendant is a child, grandchild, great-grandchild, and so on.
The DOM tree: This method traverse downwards along descendants of DOM elements, all the way down to the last descendant. To only traverse a single level down the DOM tree (to return direct children), use the children() method.
Note: The filter parameter is required for the find() method, unlike the rest of the tree traversal methods.
Tip: To return all of the descendant elements, use the «*» selector.
Syntax
| Parameter | Description |
|---|---|
| filter | Required. A selector expression, element or jQuery object to filter the search for descendants Note: To return multiple descendants, separate each expression with a comma. |
Only select descendants with a given class name
How to return descendant elements with class name «first».
Return multiple descendants
How to return multiple descendant elements.
Filter the descendant search with a jQuery collection of all
- elements
How to return all elements that are descendants of an
- element with a jQuery object.
Show the descendants of an element by tag names
A demonstration which shows who the descendants of a
