jQuery метод .find()

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

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

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

jQuery метод .find(), как и большинство методов для фильтрации не возвращает текстовые узлы, чтобы получить все дочерние элементы, включая текстовые узлы и узлы комментариев Вы можете воспользоваться методом .contents().

jQuery синтаксис:

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

selector - Selector

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

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

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

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

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

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

Параметр

Описание

selector / element

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Отличие метода .find() от .children()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( ".children" ).click(function(){ // запускаем функцию при нажатии на элемент с классом children
	    $( "*" ).css( "background", "#fff" ); // устанавливаем всем элементам цвет заднего фона белый
	    $( "div" ).children( "span" ).css( "background", "red" ); // выбираем все дочерние элементы <span> элементов <div> в документе
	  })
	  $( ".find" ).click(function(){ // запускаем функцию при нажатии на элемент с классом find
	    $( "*" ).css( "background", "#fff" ); // устанавливаем всем элементам цвет заднего фона белый
	    $( "div" ).find( "span" ).css( "background", "green"); // выбираем всех потомки <span> элементов <div>
	  })
	});
		</script>
	</head>
	<body>
		<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>
	</body>
</html>

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

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

Результат нашего примера:

jQuery перемещения