Селекторы по родителям/наследникам

jQuery также позволяет вам выбирать элементы основываясь на их родителях (parents). Есть два варианта: один отбирает только элементы, которые являются непосредственными наследниками (children) родительского элемента, а второй проходит по всей иерархии наследования, т.е. ищет наследников наследников наследников ... родительского элемента.

Синтаксис для поиска только прямых наследников элемента выглядит так:

$("div > a")

Этот селектор найдет все ссылки (тег a), которые вложены непосредственно в div. Если заменить символ "больше" на пробел, то будут найдены все ссылки внутри div-ов, независимо от того, напрямую они вложены или нет:

$("div a")

Вот пример, в котором мы раскрашиваем теги b (жирный) в синий цвет в случае, когда они находятся непосредственно в области первого тестового div-а:

<div id="divTestArea1">
	<b>Bold text</b>
	<i>Italic text</i>
	<div id="divTestArea2">
		<b>Bold text 2</b>
		<i>Italic text 2</i>
		<div>
			<b>Bold text 3</b>
		</div>
	</div>
</div>

<script type="text/javascript">
$("#divTestArea1 > b").css("color", "blue");
</script>

Как вы можете увидеть, окрасился только первый тег b. Теперь, если вы используете второй подход, оба тега b станут синими. Попробуйте следующий пример, в котором изменилось только одно - символ "больше" заменен на пробел, чтобы отметить, что мы принимаем также непрямых наследников, или внуков, как их иногда называют:

<div id="divTestArea1">
	<b>Bold text</b>
	<i>Italic text</i>
	<div id="divTestArea2">
		<b>Bold text 2</b>
		<i>Italic text 2</i>
		<div>
			<b>Bold text 3</b>
		</div>
	</div>
</div>

<script type="text/javascript">
$("#divTestArea1 b").css("color", "blue");
</script>

Еще одна крутая вещь - можно двигаться и вверх по иерархии, используя метод parent(). Мы рассмотрим его в другой главе данного пособия.