jQuery — обход DOM
Выбор дочерних элементов элемента
Чтобы выбрать дочерние элементы элемента, вы можете использовать метод children() (открывает новое окно).
Изменить цвет всех дочерних элементов .parent :
Метод принимает необязательный аргумент селектора , который можно использовать для фильтрации возвращаемых элементов.
Перебор списка элементов jQuery
Когда вам нужно перебрать список элементов jQuery.
Рассмотрим следующую структуру DOM:
Чтобы напечатать текст, присутствующий во всех элементах div класса red :
Совет: ключ — это индекс элемента div.red Перебираем внутри своего родителя. ele — это элемент HTML, поэтому мы можем создать из него объект jQuery, используя $() или jQuery() , например: $(ele) .
После этого мы можем вызвать любой метод jQuery для объекта, например css() или hide() и т. д. В этом примере мы просто вытягиваем текст объекта.
Выбор братьев и сестер
Чтобы выбрать братьев и сестер элемента, вы можете использовать метод .siblings() (opens new window).
Типичный пример, когда вы хотите изменить братьев и сестер элемента, находится в меню:
Когда пользователь щелкает элемент меню, выбранный класс должен быть добавлен к выбранному элементу и удален из его братьев и сестер :
Метод принимает необязательный аргумент селектора , который можно использовать, если вам нужно сузить количество родственных элементов, которые вы хотите выбрать:
метод ближайшей()
элемент и обход дерева DOM.
HTML
jQuery
ВЫВОД
метод first() : Первый метод возвращает первый элемент из совпадающего набора элементов.
HTML
JQuery
Вывод:
Получить следующий элемент
Чтобы получить следующий элемент, вы можете использовать метод .next() (открывает новое окно).
Если вы стоите на элементе «Анна» и хотите получить следующий элемент, «Пол», метод .next() позволит вам это сделать.
Метод принимает необязательный аргумент селектора , который можно использовать, если следующий элемент должен быть элементом определенного типа.
Если следующий элемент не типа селектор то возвращается пустой набор и модификации ничего не сделают.
Получить предыдущий элемент
Чтобы получить предыдущий элемент, вы можете использовать метод .prev() (открывает новое окно).
Если вы стоите на элементе «Анна» и хотите получить предыдущий элемент «Марка», метод .prev() позволит вам это сделать.
Метод принимает необязательный аргумент селектора , который можно использовать, если предыдущий элемент должен быть элементом определенного типа.
Если предыдущий элемент не типа , селектор , то возвращается пустой набор, и модификации ничего не сделают.
Фильтровать выборку
Чтобы отфильтровать выборку, вы можете использовать метод .filter() (opens new window).
Метод вызывается для выделения и возвращает новое выделение. Если фильтр соответствует элементу, он добавляется к возвращаемому выбору, в противном случае он игнорируется. Если ни один элемент не соответствует, возвращается пустой выбор.
HTML
Это HTML, который мы будем использовать.
Селектор
Фильтрация с помощью селекторов (открывается в новом окне) — один из самых простых способов фильтрации выбора.
Функция
Фильтрация выбора с помощью функции (открывает новое окно) полезна, если невозможно использовать селекторы.
Функция вызывается для каждого элемента в выборе. Если он возвращает значение true , то элемент будет добавлен к возвращаемому выбору.
Элементы
Вы можете фильтровать по элементам DOM. Если элементы DOM находятся в выборе, они будут включены в возвращаемый выбор.
Выбор
Вы также можете отфильтровать выбор по другому выбору. Если элемент находится в обоих выборах, он будет включен в возвращаемый выбор.
Метод find()
Метод .find() позволяет нам искать потомков этих элементов в дереве DOM и создавать новый объект jQuery из соответствующих элементов.
HTML
jQuery
Output
on-click-show-hide-div-codepen - Google Suche
AlleBilderVideosBücherMapsNewsShopping
Suchoptionen
Show, hide and toggle div on click - CodePen
codepen.io › ragax › pen › PoYxEKL
Простая функция для отображения и скрытия div по клику или переключения div по клику....
JQuery показать и скрыть div по клику мыши - CodePen
codepen.io › rajucs › pen › powRqEp
Требуется расширение URL.
При связывании другого пера в качестве ресурса убедитесь, что вы используете расширение URL того типа кода, на который хотите сослаться.
Простой клик Показать/скрыть - CodePen
codepen.io › meagbutt › pen › exeEzq
Требуется расширение URL. При связывании другого пера в качестве ресурса убедитесь, что вы используете расширение URL того типа кода, на который хотите сослаться.
Ручки с тегом 'show-hide' на CodePen
codepen.io › tag › show-hide
Ручки taggedshow-hide · Пароль Показать/Скрыть · Отобразить Показать Скрыть Анимацию · Ванильный JS Переключатель · Доступный Расширитель · JQ Показать Скрыть · Компонент Переключения Списка Vue.
Показать, скрыть и переключить div по щелчку - CodePen
codepen.io › yenolay › full › zYBXPBG
Показать скрыть Показать и скрыть. {"__browser":{"устройство":"неизвестно","мобильный":true,"имя":"chrome","платформа":"android","версия":"110"},"__constants":{ } .
..
Показать, скрыть div — переключить да нет — CodePen
codepen.io › isotrope › pen › GzdmWv
Простая функция для отображения и скрытия div по клику или переключения div по клику....
toggle show hide div только css - CodePen › burasuk › ручка › xxwprMj
Уравнение миллиарды на миллиарды! Мужество наших вопросов расшифровать, пустить корни и расцвести, пароксизм космического океана глобальной смерти.
Показать/скрыть элементы div при нажатии кнопки в центральной области с помощью jQuery - CodePen
codepen.io › rns-s › pen › yPovgb
Создайте центральную «экранную» область, которая показывает различные информационные панели при нажатии...
Метод jQuery .toggle включает отображение информационной панели ...
показать/скрыть несколько элементов div - CodePen
codepen.io › CthuKi › pen › YqZvRv
