jQuery метод .find()

Определение и применение

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

jQuery синтаксис:

Синтаксис 1.0:

JavaScript
// возвращает потомков, если они соответствуют селектору
$( selector ).find( selector )

selector - Selector

Синтаксис 1.6:

JavaScript
// возвращает потомков, если они соответствуют элементу DOM, или объекту jQuery
$( selector ).find( element )

element - Element элемент DOM, или объект jQuery

Добавлен в версии jQuery

1.0 (синтаксис обновлен в версии 1.6)

Значения параметров

Параметр Описание
selector / element Строка селектор, элемент DOM, или объект jQuery, использующиеся в качестве дополнительного фильтра. Выбор потомка (добавление в коллекцию jQuery) осуществляет только в том случае, если он соответствует переданному селектору, элементу DOM, или объекту jQuery. Обязательный параметр. Для выбора всех потомков вы можете передать в качестве параметра универсальный селектор CSS *.

Пример использования

Отличие метода .find() от .children()

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html
HTML
<button class="children">children()</button><button class="find">find()</button>
<div>
  Текст <span>&lt;span&gt;внутри&lt;/span&gt;</span> блока
  <h2>Заголовок <span>&lt;span&gt;внутри&lt;/span&gt;</span> блока</h2>
  <p><span>&lt;span&gt;Первый&lt;/span&gt;</span> параграф внутри блока</p>
  <p><span>&lt;span&gt;Второй&lt;/span&gt;</span> параграф внутри блока</p>
</div>
main.js
JavaScript
$(document).ready(function () {
    $('.children').click(function () {
        $('*').css('background', '#fff')
        $('div').children('span').css('background', 'red')
    })
    $('.find').click(function () {
        $('*').css('background', '#fff')
        $('div').find('span').css('background', 'green')
    })
})

В этом примере с использованием jQuery метода .click() мы при нажатии на элемент <button> (кнопка) с классом children вызываем функцию, которая с помощью метода .css() устанавливает всем элементам цвет заднего фона белый. Кроме того, с использованием jQuery метода .children() выбираем все дочерние элементы <span> элементов <div> в документе, и с помощью метода .css() устанавливаем им красный цвет заднего фона. В результате чего выбран будет только один элемент, так как только один элемент <span> является дочерним элементом.

Также с использованием jQuery метода .click() мы при нажатии на элемент <button> (кнопка) с классом find вызываем функцию, которая с помощью метода .css() устанавливает всем элементам цвет заднего фона белый. С использованием jQuery метода find() выбирает все потомки <span> элементов <div> в документе, и с помощью метода .css() устанавливаем им зеленый цвет заднего фона. Как вы можете заметить выбраны будут все вложенные внутри <div> элементы <span>.