jQuery селектор потомков

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

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

jQuery синтаксис:

$("родитель потомок")
/* в качестве родителя, или потомка может выступать любой селектор */

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

1.0

Селектор в CSS

CSS селектор потомков.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery селектора потомков</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$(document).ready(function(){
	  $("div p").css("color", "red"); // выбирает все элементы <p>, вложенные в <div> (его потомки)
	  $("div p span").css("color", "green"); // выбирает все элементы <span>, вложенные в <p>, которые вложены в <div> (его потомки)
	  });
		</script>
	</head>
	<body>
		<p>Абзац <span>вне</span> блока</p>
		<div>
			<p>Абзац, <span>внутри</span> блока</p>
		</div>
		</p>Абзац <span>вне</span> блока</p>
	</body>
</html>

В этом примере с использованием селектора потомков jQuery, мы выбрали все элементы <p>, вложенные в <div> (его потомки) и задали им цвет текста красный. Кроме того, мы выбрали все элементы <span>, вложенные в <p>, которые вложены в <div> и задали им зеленый цвет текста.

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

Пример использования jQuery селектора потомков.

jQuery селекторы