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

Материал из JQuery

(Различия между версиями)
Перейти к: навигация, поиск
(Соседние элементы)
(Элементы-предки)
 
Строка 806: Строка 806:
   </ul>
   </ul>
-
   <div class="clear top-element"><p class="result"></p> – найденные элементы.</div>
+
   <div class="clear top-element"><p class="result"></p> – найденный элемент.</div>
-
   <div class="clear"><p class="matched"></p> – родительские элементы, найденный элементов.</div>
+
   <div class="clear"><p class="matched"></p> – элементы-потомки найденного элемента.</div>
   <script>
   <script>
     $('p:first').addClass('result');
     $('p:first').addClass('result');
     $('p:first').parents().addClass('matched');
     $('p:first').parents().addClass('matched');
-
     $('li:eq(6)').addClass('result');
+
     var $els = $('p:first').parents(),
-
     $('li:eq(6)').parent().addClass('matched');
+
          names = $els.map(function(){
 +
            return this.nodeName
 +
          }).get();
 +
 
 +
     $('body').prepend(names.join(', '));
   </script>
   </script>

Текущая версия на 18:21, 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 извени

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