Jquery find html elements

.find()

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

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

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

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

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

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

ul class="level-1">
 li class="item-i">I li>
 li class="item-ii">II
 ul class="level-2">
 li class="item-a">A li>
 li class="item-b">B
 ul class="level-3">
 li class="item-1">1 li>
 li class="item-2">2 li>
 li class="item-3">3 li>
 ul>
 li>
 li class="item-c">C li>
 ul>
 li>
 li class="item-iii">III li>
 ul>

Если мы начнем с пункта II, мы можем найти элементы списка внутри него:

$( "li.item-ii" ).find( "li" ).css( "background-color", "red" );

Результатом работы этого кода станет красный фон для элементов A, B, 1, 2, 3 и C. Даже если элемент II соответствует выражению селектора, он не включается в результаты, так как только потомки считаются кандидатами на соответствие.

В отличие от большинства методов обхода, метод .find() требует обязательного выражения селектора. Если нам нужны все потомки, то мы можем указать универсальный селектор ‘*’ для этого.

Контекст селектора реализованн в методе .find() , следовательно, $( «li.item-ii» ).find( «li» ) эквивалентно $( «li», «li.item-ii» ) .

Начиная с jQuery 1.6, вы также можете фильтровать выбор при помощи переданного объекта jQuery или элемента. С тем же списком описанным выше, если мы начнем с:

И затем передадим этот jQuery объект в find:

$( "li.item-ii" ).find( allListElements );

То это вернет jQuery коллекцию, которая содержит который содержит только элементы списка, являющиеся потомками элемента II.

Аналогично, фильтровать можно по элементу:

var item1 = $( "li.item-1" )[ 0 ];
$( "li.item-ii" ).find( item1 ).css( "background-color", "red" );

Результатом этого вызова будет красный фон у элемента 1.

• Ajax
  • Глобальные Ajax события
  • Вспомогательные методы
  • Низкоуровневый интерфейс
  • Сокращенные методы
  • Базовые
  • Пользовательские
  • Затухание
  • Скольжение
  • События браузера
  • Загрузка документа
  • Прикрепление обработчиков
  • Объект событие
  • События формы
  • События клавиатуры
  • События мыши
  • Class атрибут
  • Копирование
  • DOM Вставка вокруг
  • DOM Вставка внутрь
  • DOM Вставка вне
  • DOM Удаление
  • DOM Замена
  • Общие аттрибуты
  • Свойства стилей
  • Манипуляция коллекциями
  • Хранилище данных
  • DOM методы элементов
  • Методы установки
  • Экземпляр объекта jQuery
  • Глобальный объект jQuery
  • Атрибут
  • Базовые
  • Базовые фильтры
  • Фильтры потомков
  • Фильтры содержимого
  • Форма
  • Иерархия
  • jQuery расширение
  • Фильтр видимости
  • Фильтрация
  • Обход
  • Обход элементов
  • Версия 1.3
  • Версия 1.7
  • Версия 1.8
  • Версия 1.9
  • Версия 1.10
  • Версия 3.0

  Русская документация по jQuery.
  При использовании любых материалов с сайта ссылка на сайт обязательна.

  Источник

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

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

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

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

   
   
  .
   
  .
   
  .
    

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

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

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

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

   
  .
   
  .
   
   
  .
   
  .
   
    

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

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

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

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

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

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

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

  в качестве ближайшего предка для элементов текущего набора:

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

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

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

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

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

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

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

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

  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() также возвращает содержимое элементов.

  Источник

  jQuery Find Method – The Complete Tutorial for Programmers

  

  The jQuery Find Method ( .find() ) returns all the descendants of the selector. The descendants are the elements that lie inside the selected element. These can be it’s children, children of children, children of children of children, and so on.

  jQuery .find() Syntax

  • 1. An element like li (meaning: all li elements that lie inside of the selector).
  • 2. A selector expression like li > a (meaning: all anchor elements that are the first child of ‘li’ element. The ‘li’ element should be a descendant of the selector).
  • 3. A jQuery object like $(“li”) .

  Note – Use comma (,) in order to separate each value that you want to find.

  jQuery Find Method Examples

  Let us understand the jQuery .find() Method by seeing few examples. I give you 6 examples of .find() method.

  1. Using jQuery .find() Method to Find Elements

  Suppose you have to find all the li elements from the below HTML :

  To do this use jQuery Find method like:

  This will change the color of all li elements, that are inside of listDiv (i.e. descendants of listDiv), to Red .

  2. Using jQuery .find() Method to Find a Single Element

  Now in the same HTML, I will find the li element that contains the findMe CSS class.

  To find the li element that has the CSS class called findMe , the jQuery .find() method code will be:

  $(".listDiv").find(".findMe").css("color", "Red");

  This will change the color of Third (Find Me) li element to red .

  Related tutorial – The jQuery .grep() method is used to filter an array based on a provided condition. You can create any such condtion based on the filter logic of your application.

  3. Use Comma (,) in jQuery Find to Return Multiple Descendants

  Use comma (,) in order to find multiple descendants. Consider this HTML:

  To find the first, third & fifth li elements and both the p elements , the jQuery Find code will be:

  $(".listDiv").find(".first,.third,.fifth,p").css("color", "Red");

  4. Use * in jQuery Find to Return All Descendants

  By using * you can find all the descendants of the selector. Consider the HTML shown below:

  I use (*) in jQuery Find method to select all of its descendants:

  The Code will change the color of all ul, li and p elements to red.

  5. Using jQuery .find() Method to Find an Expression

  Suppose you have to find the direct child of a selector. Here you can create the direct child expression with (>) and then find the element/elements.

  To find the span elements that are the direct child of li elements, you can use the .find() method like:

  $(".listDiv").find("li > span").css("color", "Red");

  Here only the Second Span will be colored red as it is the direct child of li element.

  6. Using jQuery .find() Method to Find a jQuery Object

  You can also pass jQuery Object for the filter value.

  See the below example where I am finding all the span elements using jQuery Object.

  var searchObject=$("span"); $(".listDiv").find(searchObject).css("color", "Red");

  $(".listDiv").find("span").css("color", "Red");

  By using jQuery Object for filter value you can build sharp codes in just one of the two lines.

  Suppose there is a paragraph that contains number of links. You want to highlight only those links that are linking to a certain website.

  Internet is full of search engines like Google, Yahoo, Bing and DuckDuckGo. Google is the largest of them all while DuckDuckGo is the smallest in terms of number of search they receive per month. Unlike others DuckDuckGo has a very special feature, it respect user privacy and does not tracks them. So you can do all types of searches in DuckDuckGo and be sure that no body is tracking you.
   

  It has links to Google, Yahoo, Bing and DuckDuckGo . I want to change the color of ‘DuckDuckGo’ links only.

  To do this I first create a jQuery Object that contains all ‘DuckDuckGo’ links. Then I keep this jQuery Object in the filter value of my jQuery Find Method.

  Here is the code that does this work.

  var duckDuckGo = $("a[href='https://duckduckgo.com/']"); $("p").find(duckDuckGo).css("color", "Red");

  In just 2 lines I managed to change the color of DuckDuckGo links to red.

  Isn’t this a great feature to have in jQuery?

  Please check the download link given below:

  Источник