Предположим, что на странице располагается вот такая структура:
Задача в том, чтобы при клике по элементу с классом «level» вложенные в него списки, по клику, то появлялись, то исчезали.
Выглядит это вот так:
Вся трудность здесь заключается в выборе элемента ul именно у того элемента li, по которому произведен клик. Если бы у них были разные классы, то здесь особых проблем бы не было. Вся трудность в том, что классы одинаковые.
С такой задачей можно часто сталкиваться, когда какая-то информация на веб-странице у вас выводится в цикле и изменять для него имя класса не всегда хорошая идея.
Итак, для того, чтобы решить эту задачу, нужно воспользоваться селектором this и следующими операторами:
можно также написать так:
либо вы можете использовать такую форму записи.
Кстати, если хотите узнать конверсии и ключевые показатели (KPI) для вашего продающего сайта, могу настроить веб-аналитику.
Яндекс Метрика и Google Analytics. Цели, события, отчеты.
Содержание
- Материал из JQuery
- Исчерпывающий пример
- Фильтрация элементов помощью find
- Добавлен в версии: 1.0 .find( selector )
- Добавлен в версии: 1.6 .find( element )
Материал из JQuery
Ищет элементы, соответствующие заданному селектору, внутри выбранных элементов.
Осуществляет поиск элементов внутри выбранных элементов, оставляя те, которые содержатся в заданном объекте jQuery.
Осуществляет поиск элемента element внутри выбранных элементов. Параметр element задается в виде DOM-элемента.
Вышеуказанные примеры хороши лишь в качестве демонстрации возможностей метода .find(). Например, искать span-элементы, лежащие внутри div’ов правильнее так:
.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() принимает выражение селектора того же типа что и функция $() . Элементы будут фильтроваться путем проверки — соответстует ли данный элементы селектору.
Рассмотрим страницу на которой расположены вложенные списки:
Источник: