Взаимное расположение элементов

Материал из JQuery

(Различия между версиями)
Перейти к: навигация, поиск
(Соседние элементы)
(Соседние элементы)
Строка 484: Строка 484:
<script>
<script>
-
   $('li:first').siblings().addClass('result');
+
   $('li:first').addClass('result');
   $('li:first'). siblings().addClass('matched');
   $('li:first'). siblings().addClass('matched');
</script>
</script>

Версия 16:16, 2 декабря 2013

В этой статье собраны основные термины, которые используют для описания взаимного расположения элементов в дереве DOM (элементов на странице).

Содержание

Дочерние элементы

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

Например, для ul-элемента, дочерними являются все li-элементы внутри него, однако, то что находится внутри этих li-элементов, уже не будет являться дочерними элементами (однако будет являться потомками).

Найти дочерние элементы можно с помощью селектора ("parent > child") или с помощью метода .children()

Найдем все дочерние элементы в первом ul-элементе и шестом li-элементе на странице

Элементы потомки

Потомками элемента A будут являться все элементы, лежащие внутри него. То есть все дочерние элементы, дочерние для дочерних элементов и т. д.

Найти все элементы потомки (для примера все потомки первого div-элемента на странице) можно так: $('div:first *'). Здесь для поиска используется нисходящий селектор, а так же селектор всех элементов (*).

Найдем все элементы-потомки для второго ul-элемента на странице:

Соседние элементы

Соседними элементами называют элементы, лежащие в общем элементе (общем родительском элементе).

Найти соседние элементы можно с помощью метода .siblings().

Найдем соседние элементы для первого li-элемента на странице:

Родительский элемент

Для некоторого элемента А, родительским будет элемент, внутри которого он непосредственно находится. В свою очередь, для этого родительского элемента, А, будет дочерним.

Найти родительский элемент можно с помощью метода .parent().

Найдем родительские элементы для первого p-элемента и седьмого li-элемента на странице:

Элементы-предки

Для некоторого элемента А, предками будут все элементы, которые его содержат. Это родительский элемент, родитель родителя и т. д. (туда будут входить и элементы body и html, поскольку внутри них находятся все остальные элементы страницы).

Найти всех предков (или некоторых, удовлетворяющих необходимому условию) можно с помощью метода .parents().

Найдем предков первого p-элемента на странице и выведим их имена (тегов):

От автора jquery.page2page.ru

 
Мини-игра про поход за продуктами во время карантина.

за Comic Sans извени

Личные инструменты