Jquery найти дочерний элемент по классу

Определение и применение

jQuery метод .children() возвращает дочерние элементы каждого элемента в наборе совпавших элементов, дополнительно может фильтроваться с помощью заданного селектора.

Обращаю Ваше внимание, что метод .children() отличается от метода .find() тем, что позволяет осуществить поиск элементов только на одном уровне вниз по дереву DOM, а метод .find() может пройти несколько уровней вложенности, чтобы выбрать всех потомков элемента.

jQuery метод .children(), как и большинство методов для фильтрации не возвращает текстовые узлы, чтобы получить все дочерние элементы, включая текстовые узлы и узлы комментариев Вы можете воспользоваться методом .contents().

jQuery синтаксис:

Добавлен в версии jQuery

Значения параметров

Параметр Описание
selector Строка селектор, использующаяся в качестве дополнительного фильтра. Если дополнительно указывается селектор, то выбор дочернего элемента (добавление в коллекцию 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-прокладки устраняют эти проблемы.