Содержание
- Определение и применение
- jQuery синтаксис:
- Добавлен в версии jQuery
- Значения параметров
- Пример использования
- Пример first-child
Определение и применение
jQuery метод .children() возвращает дочерние элементы каждого элемента в наборе совпавших элементов, дополнительно может фильтроваться с помощью заданного селектора.
Обращаю Ваше внимание, что метод .children() отличается от метода .find() тем, что позволяет осуществить поиск элементов только на одном уровне вниз по дереву DOM, а метод .find() может пройти несколько уровней вложенности, чтобы выбрать всех потомков элемента.
jQuery метод .children(), как и большинство методов для фильтрации не возвращает текстовые узлы, чтобы получить все дочерние элементы, включая текстовые узлы и узлы комментариев Вы можете воспользоваться методом .contents().
jQuery синтаксис:
Добавлен в версии jQuery
Значения параметров
Пример использования
В этом примере с использованием jQuery метода .children() мы выбираем все дочерние элементы элементов в документе, и с помощью метода .css() задаем им сплошную границу размером 1 пиксель зеленого цвета со всех сторон, в результате чего стили были применены ко всем элементам в документе.
Во втором случае мы используем метод .children() с дополнительным фильтром, в которм мы указываем, что выбор дочернего элемента осуществляет только в том случае, если он соответствует классу active, в результате чего был выбран только один элемент в документе.
Результат нашего примера:
Пример использования метода .children()
В следующем примере мы рассмотрим отличие методов .children() и .find():
В этом примере с использованием jQuery метода .click() мы при нажатии на элемент (кнопка) с классом children вызываем функцию, которая с помощью метода .css() устанавливает всем элементам цвет заднего фона белый. Кроме того, с использованием jQuery метода children() выбираем все дочерние элементы элементов
Также с использованием jQuery метода .click() мы при нажатии на элемент (кнопка) с классом find вызываем функцию, которая с помощью метода .css() устанавливает всем элементам цвет заднего фона белый. С использованием jQuery метода .find() выбирает все потомки элементов
Результат нашего примера:
Отличие метода .find() от .children() jQuery перемещения
В jQuery есть способ быстро найти первый дочерний элемент любого элемента. Делается это при помощи метода .find(selector) и передачи в него параметра «:first-child» .
Пример first-child
Есть список
- , в котором нужно найти первый элемент
Как получить #selFirst, используя индекс элемента, а не идентификатор?
Если вам известен дочерний элемент, который вас интересует, это первый:
Или найти по индексу:
Существует следующий способ выбора первого дочернего
Вы можете получить первый элемент через селектор индексов:
Не nth-child возвращает родных братьев, а не детей?
вернет первый элемент с классом «.second».
должен дать вам первого брата класса ‘.selector’
var node = document.getElementsByClassName(«second»)[0].firstElementChild
Отказ от ответственности: Совместимость браузера на getElementsByClassName и firstElementChild нестабильна. DOM-прокладки устраняют эти проблемы.
Источник: