Как найти дочерний элемент jquery

Поиск дочернего элемента в jquery

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

     из 125

Пытаюсь сделать его повторно используемым. В метод для настройки событий кнопок и поля ввода, передаю id и функцию события. И тут начинаются странности: $(«#pages») — находит элемент

var node = $("#pages"); node.find("input");

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

var node = $("#pages"); node.find("button.ui.button").has("i.arrow.left.icon");

не находит элемент UPD По поводу динамики, вот что забыл упомянуть: — это vue объект, у него есть условие, если кол-во страниц больше 10ти, показывать в качестве содержимого , если меньше — другое. И самое странное, в блоке v-if поиск работает, а в v-else — нет. Метод по привязке событий к кнопкам вызывается так, чтобы учитывать внесенные изменения:

vuePages.$nextTick(function());

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

jQuery — Поиск дочерних элементов children

У поста еще нет комментариев. Будьте первым и оставьте свое мнение!

Чтобы оставить комментарий зарегистрируйтесь, или войдите в аккаунт.

230 . jQuery — Упорядочивание элементов в массиве
229 . jQuery — Определение типа элемента
228 . jQuery — Удаление крайних пробелов
227 . jQuery — Изменение контекста функции
226 . jQuery — Парсинг xml-строки
225 . jQuery — Парсинг json-данных
224 . jQuery — Объединение массивов
223 . jQuery — Поэлементная обработка структур
222 . jQuery — Конвертация объекта в массив
221 . jQuery — Является ли DOM-объект частью XML
220 . jQuery — Является ли элемент объектом window
219 . jQuery — Является ли элемент пользовательским объектом
218 . jQuery — Проверка является ли аргумент числом
217 . jQuery — Проверка является ли элемент функцией
216 . jQuery — Проверка пуст ли объект
215 . jQuery — Является ли элемент массивом
214 . jQuery — Поиск элемента в массиве
213 . jQuery — Поиск элементов массива
212 . jQuery — Глобальное выполнение скрипта
211 . jQuery — Объединение объектов
210 . jQuery — Проверка наличия объекта
209 . jQuery — Утилиты
208 . jQuery — Поочередное появление и скрытие элементов
207 . jQuery — Установка прозрачности анимации у элемента
206 . jQuery — Появление и исчезновение за счет прозрачности
205 . jQuery — Поочередное разворачивание и сворачивание элементов
204 . jQuery — Разворачивание и сворачивание элементов
203 . jQuery — Появление и исчезновение элементов
202 . jQuery — Отмена выполнения всех анимаций
201 . jQuery — Длительность кадра анимации
200 . jQuery — Поочередное выполнение функций анимации
199 . jQuery — Временное приостановление дальнейшей анимации
198 . jQuery — Остановка анимации
197 . jQuery — Запуск следующей функции анимации в очереди
196 . jQuery — Очищение очереди функций анимации
195 . jQuery — Очередь функции анимации
194 . jQuery — Выполнение анимации
193 . jQuery — Эффекты и анимация
192 . jQuery — Групповой deferred
191 . jQuery — Заместитель deferred
190 . jQuery — Фильтрация параметров deferred
189 . jQuery — Получение текущего состояния объекта deffered
188 . jQuery — Проверка состояний deferred
187 . jQuery — Выполнение deferred с параметрами
186 . jQuery — Событие частичного выполнения deferred
185 . jQuery — Перевод объекта deferred из состояния не выполнено
184 . jQuery — Регистрация обработчика progress()
183 . jQuery — Обработка выполнения deferred
182 . jQuery — Объект deferred
181 . jQuery — Callbacks.remove удаляет функцию из объекта
180 . jQuery — Callbacks.has проверяет наличие функции в объекте
179 . jQuery — Callbacks.fired проверка выполнения объекта
178 . jQuery — Callbacks.fireWith функции с заданным контекстом
177 . jQuery — Callbacks.fire выполняет все функции объекта
176 . jQuery — Callbacks.empty удаляет все функции из объекта
175 . jQuery — Callbacks.disable отключение объекта callbacks
174 . jQuery — Callbacks.add добавление функции в callbacks
173 . jQuery — Callbacks (Коллбэки)
172 . jQuery — Преобразование данных формы в массив
171 . jQuery — Преобразование данных формы в строку
170 . jQuery — Преобразование объектов для использования в url
169 . jQuery — Обработка завершения всех ajax-запросов
168 . jQuery — Обработка первого ajax-запроса
167 . jQuery — Обработка неудачного завершения ajax-запроса
166 . jQuery — Обработка удачного завершения ajax-запроса
165 . jQuery — Обработка завершения ajax-запроса
164 . jQuery — Обработка отправления ajax-запроса
163 . jQuery — Параметры ajax-запроса
162 . jQuery — Ajax запрос
161 . jQuery — Ajax запрос js файла
160 . jQuery — Ajax запрос JSON-данных
159 . jQuery — Ajax запрос HTML-данных
158 . jQuery — Ajax запрос методом POST
157 . jQuery — Ajax запрос методом GET
156 . jQuery — Ajax технология
155 . jQuery — Клонирование элементов
154 . jQuery — Замена элементов
153 . jQuery — Удаление родительских элементов
152 . jQuery — Удаление содержимого у выбранных элементов
151 . jQuery — Удаление элементов remove() detach()
150 . jQuery — Обертывание содержимого элементов страницы
149 . jQuery — Обертывание элементов страницы
148 . jQuery — Добавление содержимого перед элементами
147 . jQuery — Добавление содержимого после элементов
146 . jQuery — Добавление содержимого в начало элементов
145 . jQuery — Добавление содержимого в конец элементов
144 . jQuery — Добавление текста text()
143 . jQuery — Добавление html содержимого на страницу
142 . jQuery — Получение и изменение скроллинга страницы
141 . jQuery — Спозиционированные родительские элементы
140 . jQuery — Получить и изменить позиционирование элементов
139 . jQuery — Получение и изменение ширины элементов
138 . jQuery — Получение и изменение высоты элементов
137 . jQuery — Работа с CSS
136 . jQuery — Работа с атрибутом value
135 . jQuery — Проверка наличия класса hasClass()
134 . jQuery — Добавление и удаление класса toggleClass()
133 . jQuery — Удаление класса removeClass()
132 . jQuery — Добавление класса addClass()
131 . jQuery — Удаление свойства removeProp()
130 . jQuery — Получение и изменение свойства prop()
129 . jQuery — Удаление атрибута removeAttr()
128 . jQuery — Работа с атрибутами attr()
127 . jQuery — Функции манипуляции с элементами
126 . jQuery — Предыдущий набор элементов end()
125 . jQuery — Поиск содержащихся элементов contents()
124 . jQuery — Добавление предыдущего набора andSelf()
123 . jQuery — Добавление элементов в набор add()
122 . jQuery — Работа функции с элементами набора map()
121 . jQuery — Вызов функции для элементов набора each()
120 . jQuery — Поиск элементов с индексами из заданной области
119 . jQuery — Поиск элементов не соответствующих условиям not()
118 . jQuery — Поиск последнего элемента в наборе last()
117 . jQuery — Проверка наличия элемента is()
116 . jQuery — Поиск элементов с заданным содержимым has()
115 . jQuery — Поиск первого элемента в наборе first()
114 . jQuery — Фильтрация выбранных элементов filter()
113 . jQuery — Поиск элементов лежащих на одном уровне
112 . jQuery — Поиск части элементов лежащих перед выбранными
111 . jQuery — Поиск всех элементов лежащих перед выбранными
110 . jQuery — Поиск элементов лежащих перед выбранными
109 . jQuery — Поиск всех предков останавливаясь на найденном
108 . jQuery — Поиск всех предков parents
107 . jQuery — Поиск родительского элемента parent
106 . jQuery — Спозиционированные родительские элементы offsetPare
105 . jQuery — Поиск части элементов лежащих после выбранных
104 . jQuery — Поиск всех элементов лежащих после выбранных
103 . jQuery — Поиск элементов лежащих после выбранных next
102 . jQuery — Поиск элементов внутри выбранных find
101 . jQuery — Ближайший подходящий предок closest
100 . jQuery — Поиск дочерних элементов children
99 . jQuery — Работа с набором элементов
98 . jQuery — Обработчик или источник события scroll
97 . jQuery — Обработчик или источник события resize
96 . jQuery — Обработчик события error
95 . jQuery — Обработчик события unload
94 . jQuery — Обработчик события load
93 . jQuery — Обработчик готовности дерева DOM ready
92 . jQuery — Обработчик или источник события change
91 . jQuery — Обработчик или источник события submit
90 . jQuery — Обработчик или источник события select
89 . jQuery — Обработчик события focusout
88 . jQuery — Обработчик события focusin
87 . jQuery — Обработчик или источник события blur
86 . jQuery — Обработчик или источник события focus
85 . jQuery — Обработчик события keypress
84 . jQuery — Обработчик или источник события keyup
83 . jQuery — Обработчик или источник события keydown
82 . jQuery — Поочередное выполнение функций toggle
81 . jQuery — Обработчик или источник события mouseover
80 . jQuery — Обработчик или источник события mouseout
79 . jQuery — Обработчик или источник события mousemove
78 . jQuery — Обработчик или источник выхода курсора из элемента
77 . jQuery — Обработчик появления курсора на элементе
76 . jQuery — Обработчик или источник события mouseup
75 . jQuery — Обработчик или источник события mousedown
74 . jQuery — Обработчик события hover
73 . jQuery — Обработчик или источник события dblclick
72 . jQuery — Обработчик или источник события click
71 . jQuery — Объект event
70 . jQuery — Изменение контекста функции jQuery.proxy()
69 . jQuery — Вызов обработчика события triggerHandler()
68 . jQuery — Вызов события trigger()
67 . jQuery — Удаление обработчика событий unbind
66 . jQuery — Установка разового обработчика событий one()
65 . jQuery — Событие off()
64 . jQuery — Событие on()
63 . jQuery — События
62 . jQuery — Селектор неактивных элементов формы disabled
61 . jQuery — Селектор активных элементов формы enabled
60 . jQuery — Селектор выбранных элементов checked
59 . jQuery — Селектор элементов в фокусе focus
58 . jQuery — Селектор выбранных элементов selected
57 . jQuery — Селектор элемента формы input
56 . jQuery — Селектор изображения для отправки формы
55 . jQuery — Селектор кнопки очистки формы reset
54 . jQuery — Селектор кнопки отправки формы submit
53 . jQuery — Селектор поля загрузки файла file
52 . jQuery — Селектор поля ввода пароля password
51 . jQuery — Селектор текстовых полей text
50 . jQuery — Селектор флажков checkbox
49 . jQuery — Селектор переключателей radio
48 . jQuery — Селектор кнопок button
47 . jQuery — Заданные условные элементы в своих родителях
46 . jQuery — Последние условные элементы в своих родителях
45 . jQuery — Первые условные элементы в своих родителях
44 . jQuery — Единственные условные элементы в своих родителях
43 . jQuery — Единственные элементы в своих родителях
42 . jQuery — Заданные элементы в своих родителях
41 . jQuery — Последние элементы в своих родителях
40 . jQuery — Первые элементы в своих родителях
39 . jQuery — Селектор parent наличия содержимого
38 . jQuery -Селектор has наличия конретных элементов
37 . jQuery — Селектор empty — селектор отсутствия содержимого
36 . jQuery — Селектор contains — селектор по тексту
35 . jQuery — Селектор root — корневой элемент документа
34 . jQuery — Селектор lang — язык содержимого элементов
33 . jQuery — Селектор visible — видимые элементы
32 . jQuery — Селектор hidden — невидимые элементы
31 . jQuery — Селектор animated — анимированные элементы
30 . jQuery — Селектор header — заголовки
29 . jQuery — Селектор ln — элементы с индексом до n
28 . jQuery — Селектор gt — Элементы с индексом после n
27 . jQuery — Селектор odd — начетные элементы
26 . jQuery — Селектор even — четные элементы
25 . jQuery — Селектор not — Исключение из найденных элементов
24 . jQuery — Селектор eq — элемент по индексу
23 . jQuery — Селектор last — последний найденный элемент
22 . jQuery — Селектор first — первый найденный элемент
21 . jQuery — Селектор focus — элементы в фокусе
20 . jQuery — Селектор по нескольким атрибутам
19 . jQuery — Селектор по префиксу атрибута
18 . jQuery — Селектор по слову в атрибуте
17 . jQuery — Селектор по подстроке в атрибуте
16 . jQuery — Селектор по концу атрибута
15 . jQuery — Селектор по началу атрибута
14 . jQuery — Селектор по несовпадению с атрибутом
13 . jQuery — Селектор по значению атрибута
12 . jQuery — Селектор по наличию атрибута
11 . jQuery — Следующие селекторы
10 . jQuery — Смежные селекторы
9 . jQuery — Дочерние селекторы
8 . jQuery — Селекторы потомки (нисходящие селекторы)
7 . jQuery — Групповые селекторы
6 . jQuery — Селектор по имени тега
5 . jQuery — Селектор по идентификатору
4 . jQuery — Селектор по классу
3 . jQuery — Селектор всех элементов
2 . jQuery — Селекторы
1 . jQuery — Что такое библиотека jQuery

Навигация по элементам в jQuery

Нахождение потомков для каждого элемента текущего набора в jQuery выполняется с помощью find() .

Указать искомые элементы можно посредством селектора, ссылки на DOM-элементы или набора jQuery. В качестве результата этот метод возвращает новый объект jQuery, состоящий из найденных элементов.

Например, выбрать все элементы с классом « carousel-items », расположенные в « .carousel »:

  .
 .
 .

children() – выбор дочерних элементов

Кроме find() в jQuery имеется ещё один похожий метод: children() .

children() в отличие от find() выполняет поиск элементов только среди детей каждого элемента текущего набора (т.е. не опускается ниже одного уровня по DOM-дереву).

Для выбора всех дочерних элементов для каждого элемента текущего набора children() необходимо вызвать без аргументов:

 .
 .
 
 .
 .

Если необходимо выбрать не все, а только определённые, то можно использовать селектор.

Например, выберем не все элементы, а только :

JavaScript

const elements = $('.message').children('h3');

closest() – выбор ближайшего предка

В jQuery поиск ближайшего предка (включая сам этот элемент) выполняется с помощью метода closest() .

Если более точно, то closest() выбирает для каждого элемента текущего набора первый элемент, соответствующий указанному (поиск начинается с самого элемента, а потом вверх по предкам).

Для указания искомый элементов можно использовать селектор, ссылку на DOM-элементы и набор jQuery.

One
Two
Three

next() – выбор следующего элемента

В jQuery получить для каждого элемента набора следующий элемент (при необходимости соответствующий указанному селектору) можно с помощью метода next() .

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

Если необходимо выбрать не конкретный элемент, а просто следующий, то в этом случае вызывать next() необходимо без аргументов:

JavaScript

const element = $('li.active').next();

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

JavaScript

const elements = $('li.active').nextAll();

Кроме next() и nextAll() в jQuery имеется ещё nextUntil() . Он позволяет получить все следующие элементы до указанного.

JavaScript

const elements = $('li.active').nextUntil('li','li:last-child');

prev() – выбор предыдущего элемента

В jQuery кроме методов для выбора следующих элементов имеются аналогичные для получения предыдущих: prev() , prevAll() и prevUntil() .

siblings() – выбор сиблингов

Получение сиблингов для каждого элемента набора в jQuery осуществляется с помощью метода siblings() .

При этом, если нужно выбрать не все, а только определённые сиблинги, то можно указать соответствующий селектор. В качестве результата siblings() возвращает новый набор jQuery, состоящий из найденных элементов.

parent() – получение родителя

В jQuery получение родительского элемента для каждого элемента текущего набора осуществляется с помощью parent() .

При необходимости в parent() мы можем передать селектор и тем самым указать, что нам нужны только элементы соответствующие ему.

В jQuery кроме parent() имеется ещё метод parents() . Он в отличие от первого получает для элементов набора не только их непосредственных родителей, а вообще всех предков (до ).

При необходимости можно выбрать не всех предков, а только тех, которые соответствует указанному селектору.

Например, получим предков, соответствующего селектору .one для элемента с классом three :

Ограничить подъём по дереву DOM при получении предков можно посредством parentsUntil() :

Например, получим предков являющимися для элемента с классом active (при этом поиск предков должен ограничиваться элементом соответствующим селектору .container :

offsetParent() – получение ближайшего позиционированного предка

В jQuery для получения ближайшего позиционированного предка можно воспользоваться offsetParent() . Этот метод не принимает никаких аргументов.

Этот метод может использоваться в операциях расчета смещений для выполнения анимации и размещения объектов на странице.

Например, найдём offsetParent для элемента с классом active :

contents() — выбрать все дочерние узлы

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

Этот метод не принимает никаких аргументов.

.contents() и .children() аналогичны, за исключением того, что первый включает в себя текстовые узлы и комментарии.

Метод .contents() можно также использовать для получения содержимого iframe, если iframe находится в том же домене, что и главная страница.

Начиная с jQuery 3.2, .contents() также возвращает содержимое элементов.