Jquery поиск дочерних элементов

Описание: Поиск потомков внутри каждого элемента в текущем наборе соотвествующих элементов с фильтрацией по селектору, объекту jQuery или элементу.

Добавлен в версии: 1.0 .find( selector )

Добавлен в версии: 1.6 .find( element )

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

Первая сигнатура метода .find() принимает выражение селектора того же типа что и функция $() . Элементы будут фильтроваться путем проверки — соответстует ли данный элементы селектору.

Рассмотрим страницу на которой расположены вложенные списки:

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

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 перемещения

Есть вот такой блок для перелистывания "страниц" таблицы. Когда их очень много.

Пытаюсь сделать его повторно используемым. В метод для настройки событий кнопок и поля ввода, передаю id и функцию события. И тут начинаются странности:

$("#pages") — находит элемент

не находит элемент

не находит элемент

UPD

По поводу динамики, вот что забыл упомянуть:

Метод по привязке событий к кнопкам вызывается так, чтобы учитывать внесенные изменения:

При этом получить input из $("#pages") на чистом js получилось без проблем

2 ответа 2

Если просто смотреть на статический код, то все работает, как видите на примере.

Скорее всего ваша страница динамически что-то заменяет, дорисовывает или модифицирует что-то, и вы в динамическом DOM уже не находите элементы, который видели в статическом стартовом варианте кода.

Используйте любой отладчик, есть во всех современных браузерах, F12 по умолчанию, и посмотрите на элементы Инспектором. Он покажет именно динамическое состояние.


[an error occurred while processing the directive]
Карта сайта