jquery this вложенный элемент

Предположим, что на странице располагается вот такая структура:

Задача в том, чтобы при клике по элементу с классом «level» вложенные в него списки, по клику, то появлялись, то исчезали.

Выглядит это вот так:

Вся трудность здесь заключается в выборе элемента ul именно у того элемента li, по которому произведен клик. Если бы у них были разные классы, то здесь особых проблем бы не было. Вся трудность в том, что классы одинаковые.

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

Итак, для того, чтобы решить эту задачу, нужно воспользоваться селектором this и следующими операторами:

можно также написать так:

либо вы можете использовать такую форму записи.

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

Яндекс Метрика и Google Analytics. Цели, события, отчеты.

Материал из JQuery

Ищет элементы, соответствующие заданному селектору, внутри выбранных элементов.

Осуществляет поиск элементов внутри выбранных элементов, оставляя те, которые содержатся в заданном объекте jQuery.

Осуществляет поиск элемента element внутри выбранных элементов. Параметр element задается в виде DOM-элемента.

$(«div»).find(«span») вернет все элементы span, находящиеся внутри div-элементов.
$(«div»).find(«.bigBlock») вернет все элементы с классом bigBlock, находящиеся внутри div-элементов.
$(«div»).find( $(«.bigBlock») ) вернет все элементы с классом bigBlock, находящиеся внутри div-элементов.

Вышеуказанные примеры хороши лишь в качестве демонстрации возможностей метода .find(). Например, искать span-элементы, лежащие внутри div’ов правильнее так:

Читайте также:  honor h60 l02 прошивка

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

Так же, .find() удобен для использования в цепочках методов:

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

Исчерпывающий пример

Внутри каждого ul-элемента, найдем первый li-элемент и последний p-элемент:

Фильтрация элементов помощью find

Кроме поиска, .find() может осуществлять своеобразную фильтрацию. Например вот так можно отфильтровать span‘ы, оставив только те, которые лежат внутри параграфов:

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

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

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

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

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

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

Оцените статью
Добавить комментарий

Adblock detector