Метод parent и children библиотеки jQuery
Два метода-антагониста, принцип работы которых ясен из имени самих методов.
Метод children
Метод возвращает все элементы, которые являются дочерними по отношению к элементу, указанному в качестве аргумента метода.
- — вернет элементы, которые лежат непосредственно внутри div-элементов
- — вернет элементы класса , которые лежат непосредственно внутри div-элементов
- block #area`
Метод в чем-то похож на метод , рассмотренный мною ранее. Но между двумя этими методами существует одно большая разница.
Метод возвращает (другими словами — ищет) все элементы, расположенные на DOM-уровне ниже указанного элемента; и только на этом уровне. Другими словами — возвращаются все непосредственные children-элементы.
Метод производит поиск указанных элементов на всех уровнях DOM-дерева. Другими словами, будет производиться поиск элементов на всех уровнях, вне зависимости от глубины вложенности этих уровней.
Метод parent
Метод возвращает все элементы, являющиеся непосредственными родителями элемента(ов), указанных в качестве аргументов данного метода.
- — вернет родителя элемента с идентификатором
- — вернет родительские элементы всех div-ов
- — вернет элементы класса , которые являются родительскими для div-элементов на странице
Красивая функция trackBy
Пример красивой функции trackBy для Angular. Функция понравилась своей лаконичностью:<% highlight typescript %>public trackByNumber = (_. … Continue reading
Навигация по элементам в jQuery
Нахождение потомков для каждого элемента текущего набора в jQuery выполняется с помощью find() .
Указать искомые элементы можно посредством селектора, ссылки на DOM-элементы или набора jQuery. В качестве результата этот метод возвращает новый объект jQuery, состоящий из найденных элементов.
Например, выбрать все элементы с классом « carousel-items », расположенные в « .carousel »:
children() – выбор дочерних элементов
Кроме find() в jQuery имеется ещё один похожий метод: children() .
children() в отличие от find() выполняет поиск элементов только среди детей каждого элемента текущего набора (т.е. не опускается ниже одного уровня по DOM-дереву).
Для выбора всех дочерних элементов для каждого элемента текущего набора children() необходимо вызвать без аргументов:
Если необходимо выбрать не все, а только определённые, то можно использовать селектор.
Например, выберем не все элементы, а только <h3> :
closest() – выбор ближайшего предка
В jQuery поиск ближайшего предка (включая сам этот элемент) выполняется с помощью метода closest() .
Если более точно, то closest() выбирает для каждого элемента текущего набора первый элемент, соответствующий указанному (поиск начинается с самого элемента, а потом вверх по предкам).
Для указания искомый элементов можно использовать селектор, ссылку на DOM-элементы и набор jQuery.
Например, выбрать <ul> в качестве ближайшего предка для элементов текущего набора:
next() – выбор следующего элемента
В jQuery получить для каждого элемента набора следующий элемент (при необходимости соответствующий указанному селектору) можно с помощью метода next() .
При этом следующий элемент по отношению к исходному должен являться сиблингом (или другими словами находиться с ним на одном уровне вложенности). В качестве результата next() возвращает новый объект jQuery, состоящий из найденных элементов.
Например, выберем <li> расположенный после « .active »:
Если необходимо выбрать не конкретный элемент, а просто следующий, то в этом случае вызывать next() необходимо без аргументов:
Когда необходимо получить не один, а все следующие элементы для каждого элемента набора, следует использовать nextAll() .
Кроме next() и nextAll() в jQuery имеется ещё nextUntil() . Он позволяет получить все следующие элементы до указанного.
Например, выберем все <li> кроме последнего, расположенные после « .active »:
prev() – выбор предыдущего элемента
В jQuery кроме методов для выбора следующих элементов имеются аналогичные для получения предыдущих: prev() , prevAll() и prevUntil() .
siblings() – выбор сиблингов
Получение сиблингов для каждого элемента набора в jQuery осуществляется с помощью метода siblings() .
При этом, если нужно выбрать не все, а только определённые сиблинги, то можно указать соответствующий селектор. В качестве результата siblings() возвращает новый набор jQuery, состоящий из найденных элементов.
parent() – получение родителя
В jQuery получение родительского элемента для каждого элемента текущего набора осуществляется с помощью parent() .
При необходимости в parent() мы можем передать селектор и тем самым указать, что нам нужны только элементы соответствующие ему.
Например, получим родительский элемент для <li> с классом active :
В jQuery кроме parent() имеется ещё метод parents() . Он в отличие от первого получает для элементов набора не только их непосредственных родителей, а вообще всех предков (до <html> ).
Например, получим всех предков для <li> с классом active :
При необходимости можно выбрать не всех предков, а только тех, которые соответствует указанному селектору.
Например, получим предков, соответствующего селектору .one для элемента с классом three :
Ограничить подъём по дереву DOM при получении предков можно посредством parentsUntil() :
Например, получим предков являющимися <div> для элемента с классом active (при этом поиск предков должен ограничиваться элементом соответствующим селектору .container :
offsetParent() – получение ближайшего позиционированного предка
В jQuery для получения ближайшего позиционированного предка можно воспользоваться offsetParent() . Этот метод не принимает никаких аргументов.
Этот метод может использоваться в операциях расчета смещений для выполнения анимации и размещения объектов на странице.
Например, найдём offsetParent для элемента с классом active :
contents() — выбрать все дочерние узлы
В jQuery метод children() используется, когда нужно получить все дочерние узлы (элементы, текстовые узлы и комментарии) для каждого элемента текущего набора.
Этот метод не принимает никаких аргументов.
.contents() и .children() аналогичны, за исключением того, что первый включает в себя текстовые узлы и комментарии.
Метод .contents() можно также использовать для получения содержимого iframe, если iframe находится в том же домене, что и главная страница.
Начиная с jQuery 3.2, .contents() также возвращает содержимое <template> элементов.
.parent()
Description: Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
version added: 1.0 .parent( [selector ] )
Given a jQuery object that represents a set of DOM elements, the parent() method traverses to the immediate parent of each of these elements in the DOM tree and constructs a new jQuery object from the matching elements.
This method is similar to .parents() , except .parent() only travels a single level up the DOM tree. Also, $( "html" ).parent() method returns a set containing document whereas $( "html" ).parents() returns an empty set.
The method optionally accepts a selector expression of the same type that we can pass to the $() function. If the selector is supplied, the elements will be filtered by testing whether they match it.
Руководство по выбору родительских элементов в jQuery
jQuery предоставляет такие полезные методы, такие как parent() , parents() и parentsUntil() , которые можно использовать для получения в DOM-дереве любого предка в иерархии.
jQuery-метод parent()
jQuery-метод parent() используется для получения прямого родительского элемента.
В следующем примере будет выделен прямой родительский элемента <li> — элемент <ul> , путем добавления класса .highlight .
jQuery-метод parents()
jQuery-метод parents() используется для получения предков выбранного элемента.
В следующем примере будет добавлена граница вокруг всех элементов-предков <li> , которыми являются элементы <ul> , <div> , <body> и <html> .
При желании вы можете включить один или несколько селекторов в качестве параметра в методе parents() , чтобы отфильтровать результаты поиска предков. В следующем примере будет применена граница вокруг всех предков <li> , которыми являются элементы <div> .
jQuery-метод parentsUntil()
jQuery-метод parentsUntil() используется, чтобы получить все предки до, но не включая элемент, соответствующий селектору. Проще говоря, мы можем сказать, что он возвращает все элементы-предки между двумя заданными элементами в иерархии DOM.
В следующем примере будет добавлена граница вокруг всех элементов-предков <li> , за исключением элемента <html> , т. е. добавлена граница для элементов <ul> , <div> и <body> .
alt=»flexbe banner 728×90″ /> alt=»flexbe banner 120×600″ />
alt=»beget banner 728×90″ /> alt=»beget banner 120×600″ />
alt=»kwork banner 728×90″ /> alt=»kwork banner 120×600″ />
Насколько публикация полезна?
Нажмите на звезду, чтобы оценить!
Средняя оценка 5 / 5. Количество оценок: 1
Оценок пока нет. Поставьте оценку первым.
Похожие посты
- 15 декабря, 2019
- 113
Руководство по синтаксису в jQuery
- 14 декабря, 2019
- 189
Руководство по методу animate() в jQuery
- 14 декабря, 2019
- 120
Руководство по callback-функциям в jQuery
Разработка сайтов для бизнеса
Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.