Взаимное расположение элементов
В этой статье собраны основные термины, которые используют для описания взаимного расположения элементов в дереве DOM (элементов на странице).
Содержание |
Дочерние элементы
Для некоторого элемента А, дочерними будут являться элементы, находящиеся непосредственно внутри А. В свою очередь, А будет являться родительским элементом, для каждого из дочерних.
Например, для ul-элемента, дочерними являются все li-элементы внутри него, однако, то что находится внутри этих li-элементов, уже не будет являться дочерними элементами (однако будет являться потомками).
Найти дочерние элементы можно с помощью селектора ("parent > child") или с помощью метода .children()
Найдем все дочерние элементы в первом ul-элементе и шестом li-элементе на странице
~lt~!DOCTYPE~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~ ~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~ ~lt~style~gt~ body{ font:10pt Arial,sans-serif; color:#555; } ul{ float:left; margin:3px; margin-left:15px; padding:10px 10px 5px 10px; border:2px solid #ddd; } ul.matched{ position:relative; left:-3px; border:3px solid #8888ff; } ul.result{ position:relative; left:-3px; border:3px solid #ff8888; } li{ position:relative; float:left; margin:7px; padding:2px; width:60px; height:60px; background-color:#e1e1e1; border:2px solid #e1e1e1; } li.matched{ margin-left:6px; margin-right:6px; width:60px; height:60px; border:3px solid #8888ff; } li.result{ margin-left:6px; margin-right:6px; width:60px; height:60px; border:3px solid #ff8888; } p{ position:relative; float:left; width:16px; height:16px; margin:2px; background-color:#f4f4f4; font-size:1pt; } p.matched{ width:12px; height:12px; border:2px solid #8888ff; } p.result{ width:12px; height:12px; border:2px solid #ff8888; } .matched_addit{ background:#f4f4f4 url('/tags/images/matched_mini.png') center no-repeat; } .srce{ padding:16px 0; text-align:center; } .srce tt{ color:#0088ff; } .tgName{ position:absolute; top:11px; left:45%; font-size:8pt; color:#b2ada1; } li .tgName{ top:24px; left:18px; } li p .tgName{ top:0; left:1px; font-size:7pt; } .top-element{ padding-top:20px; } .clear{clear:both} ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~tt class="tgName"~gt~‹ul›~lt~/tt~gt~ ~lt~ul~gt~ ~lt~li~gt~~lt~tt class="tgName"~gt~‹li›~lt~/tt~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~ ~lt~p~gt~~lt~tt class="tgName"~gt~‹p›~lt~/tt~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~div class="clear" /~gt~ ~lt~/ul~gt~ ~lt~ul~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~/li~gt~ ~lt~li~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~/li~gt~ ~lt~div class="clear" /~gt~ ~lt~/ul~gt~ ~lt~ul~gt~ ~lt~li~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~div class="clear" /~gt~ ~lt~/ul~gt~ ~lt~div class="clear top-element"~gt~~lt~p class="result"~gt~~lt~/p~gt~ – найденные элементы.~lt~/div~gt~ ~lt~div class="clear"~gt~~lt~p class="matched"~gt~~lt~/p~gt~ – элементы, дочерние для найденных элементов.~lt~/div~gt~ ~lt~script~gt~ $('ul:first').addClass('result'); $('ul:first>*').addClass('matched'); $('li:eq(8)').addClass('result'); $('li:eq(8)').children().addClass('matched'); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~
Элементы потомки
Потомками элемента A будут являться все элементы, лежащие внутри него. То есть все дочерние элементы, дочерние для дочерних элементов и т. д.
Найти все элементы потомки (для примера все потомки первого div-элемента на странице) можно так: $('div:first *'). Здесь для поиска используется нисходящий селектор, а так же селектор всех элементов (*).
Найдем все элементы-потомки для второго ul-элемента на странице:
~lt~!DOCTYPE~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~ ~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~ ~lt~style~gt~ body{ font:10pt Arial,sans-serif; color:#555; } ul{ float:left; margin:3px; margin-left:15px; padding:10px 10px 5px 10px; border:2px solid #ddd; } ul.matched{ position:relative; left:-3px; border:3px solid #8888ff; } ul.result{ position:relative; left:-3px; border:3px solid #ff8888; } li{ position:relative; float:left; margin:7px; padding:2px; width:60px; height:60px; background-color:#e1e1e1; border:2px solid #e1e1e1; } li.matched{ margin-left:6px; margin-right:6px; width:60px; height:60px; border:3px solid #8888ff; } li.result{ margin-left:6px; margin-right:6px; width:60px; height:60px; border:3px solid #ff8888; } p{ position:relative; float:left; width:16px; height:16px; margin:2px; background-color:#f4f4f4; font-size:1pt; } p.matched{ width:12px; height:12px; border:2px solid #8888ff; } p.result{ width:12px; height:12px; border:2px solid #ff8888; } .matched_addit{ background:#f4f4f4 url('/tags/images/matched_mini.png') center no-repeat; } .srce{ padding:16px 0; text-align:center; } .srce tt{ color:#0088ff; } .tgName{ position:absolute; top:11px; left:45%; font-size:8pt; color:#b2ada1; } li .tgName{ top:24px; left:18px; } li p .tgName{ top:0; left:1px; font-size:7pt; } .top-element{ padding-top:20px; } .clear{clear:both} ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~tt class="tgName"~gt~‹ul›~lt~/tt~gt~ ~lt~ul~gt~ ~lt~li~gt~~lt~tt class="tgName"~gt~‹li›~lt~/tt~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~ ~lt~p~gt~~lt~tt class="tgName"~gt~‹p›~lt~/tt~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~div class="clear" /~gt~ ~lt~/ul~gt~ ~lt~ul~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~/li~gt~ ~lt~li~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~/li~gt~ ~lt~div class="clear" /~gt~ ~lt~/ul~gt~ ~lt~ul~gt~ ~lt~li~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~div class="clear" /~gt~ ~lt~/ul~gt~ ~lt~div class="clear top-element"~gt~~lt~p class="result"~gt~~lt~/p~gt~ – найденный элемент.~lt~/div~gt~ ~lt~div class="clear"~gt~~lt~p class="matched"~gt~~lt~/p~gt~ – элементы-потомки для найденного элемента.~lt~/div~gt~ ~lt~script~gt~ $('ul:eq(1)').addClass('result'); $('ul:eq(1) *').addClass('matched'); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~
Соседние элементы
Соседними элементами называют элементы, лежащие в общем элементе (общем родительском элементе).
Найти соседние элементы можно с помощью метода .siblings().
Найдем соседние элементы для первого li-элемента на странице:
~lt~!DOCTYPE~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~ ~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~ ~lt~style~gt~ body{ font:10pt Arial,sans-serif; color:#555; } ul{ float:left; margin:3px; margin-left:15px; padding:10px 10px 5px 10px; border:2px solid #ddd; } ul.matched{ position:relative; left:-3px; border:3px solid #8888ff; } ul.result{ position:relative; left:-3px; border:3px solid #ff8888; } li{ position:relative; float:left; margin:7px; padding:2px; width:60px; height:60px; background-color:#e1e1e1; border:2px solid #e1e1e1; } li.matched{ margin-left:6px; margin-right:6px; width:60px; height:60px; border:3px solid #8888ff; } li.result{ margin-left:6px; margin-right:6px; width:60px; height:60px; border:3px solid #ff8888; } p{ position:relative; float:left; width:16px; height:16px; margin:2px; background-color:#f4f4f4; font-size:1pt; } p.matched{ width:12px; height:12px; border:2px solid #8888ff; } p.result{ width:12px; height:12px; border:2px solid #ff8888; } .matched_addit{ background:#f4f4f4 url('/tags/images/matched_mini.png') center no-repeat; } .srce{ padding:16px 0; text-align:center; } .srce tt{ color:#0088ff; } .tgName{ position:absolute; top:11px; left:45%; font-size:8pt; color:#b2ada1; } li .tgName{ top:24px; left:18px; } li p .tgName{ top:0; left:1px; font-size:7pt; } .top-element{ padding-top:20px; } .clear{clear:both} ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~tt class="tgName"~gt~‹ul›~lt~/tt~gt~ ~lt~ul~gt~ ~lt~li~gt~~lt~tt class="tgName"~gt~‹li›~lt~/tt~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~ ~lt~p~gt~~lt~tt class="tgName"~gt~‹p›~lt~/tt~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~div class="clear" /~gt~ ~lt~/ul~gt~ ~lt~ul~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~/li~gt~ ~lt~li~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~/li~gt~ ~lt~div class="clear" /~gt~ ~lt~/ul~gt~ ~lt~ul~gt~ ~lt~li~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~div class="clear" /~gt~ ~lt~/ul~gt~ ~lt~div class="clear top-element"~gt~~lt~p class="result"~gt~~lt~/p~gt~ – найденные элементы.~lt~/div~gt~ ~lt~div class="clear"~gt~~lt~p class="matched"~gt~~lt~/p~gt~ – элементы, соседние для найденных элементов.~lt~/div~gt~ ~lt~script~gt~ $('li:first').addClass('result'); $('li:first'). siblings().addClass('matched'); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~
Родительский элемент
Для некоторого элемента А, родительским будет элемент, внутри которого он непосредственно находится. В свою очередь, для этого родительского элемента, А, будет дочерним.
Найти родительский элемент можно с помощью метода .parent().
Найдем родительские элементы для первого p-элемента и седьмого li-элемента на странице:
~lt~!DOCTYPE~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~ ~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~ ~lt~style~gt~ body{ font:10pt Arial,sans-serif; color:#555; } ul{ float:left; margin:3px; margin-left:15px; padding:10px 10px 5px 10px; border:2px solid #ddd; } ul.matched{ position:relative; left:-3px; border:3px solid #8888ff; } ul.result{ position:relative; left:-3px; border:3px solid #ff8888; } li{ position:relative; float:left; margin:7px; padding:2px; width:60px; height:60px; background-color:#e1e1e1; border:2px solid #e1e1e1; } li.matched{ margin-left:6px; margin-right:6px; width:60px; height:60px; border:3px solid #8888ff; } li.result{ margin-left:6px; margin-right:6px; width:60px; height:60px; border:3px solid #ff8888; } p{ position:relative; float:left; width:16px; height:16px; margin:2px; background-color:#f4f4f4; font-size:1pt; } p.matched{ width:12px; height:12px; border:2px solid #8888ff; } p.result{ width:12px; height:12px; border:2px solid #ff8888; } .matched_addit{ background:#f4f4f4 url('/tags/images/matched_mini.png') center no-repeat; } .srce{ padding:16px 0; text-align:center; } .srce tt{ color:#0088ff; } .tgName{ position:absolute; top:11px; left:45%; font-size:8pt; color:#b2ada1; } li .tgName{ top:24px; left:18px; } li p .tgName{ top:0; left:1px; font-size:7pt; } .top-element{ padding-top:20px; } .clear{clear:both} ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~tt class="tgName"~gt~‹ul›~lt~/tt~gt~ ~lt~ul~gt~ ~lt~li~gt~~lt~tt class="tgName"~gt~‹li›~lt~/tt~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~tt class="tgName"~gt~‹p›~lt~/tt~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~div class="clear" /~gt~ ~lt~/ul~gt~ ~lt~ul~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~/li~gt~ ~lt~li~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~/li~gt~ ~lt~div class="clear" /~gt~ ~lt~/ul~gt~ ~lt~ul~gt~ ~lt~li~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~div class="clear" /~gt~ ~lt~/ul~gt~ ~lt~div class="clear top-element"~gt~~lt~p class="result"~gt~~lt~/p~gt~ – найденные элементы.~lt~/div~gt~ ~lt~div class="clear"~gt~~lt~p class="matched"~gt~~lt~/p~gt~ – родительские элементы, найденный элементов.~lt~/div~gt~ ~lt~script~gt~ $('p:first').addClass('result'); $('p:first').parent().addClass('matched'); $('li:eq(6)').addClass('result'); $('li:eq(6)').parent().addClass('matched'); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~
Элементы-предки
Для некоторого элемента А, предками будут все элементы, которые его содержат. Это родительский элемент, родитель родителя и т. д. (туда будут входить и элементы body и html, поскольку внутри них находятся все остальные элементы страницы).
Найти всех предков (или некоторых, удовлетворяющих необходимому условию) можно с помощью метода .parents().
Найдем предков первого p-элемента на странице и выведим их имена (тегов):
~lt~!DOCTYPE~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~ ~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~ ~lt~style~gt~ body{ font:10pt Arial,sans-serif; color:#555; } ul{ float:left; margin:3px; margin-left:15px; padding:10px 10px 5px 10px; border:2px solid #ddd; } ul.matched{ position:relative; left:-3px; border:3px solid #8888ff; } ul.result{ position:relative; left:-3px; border:3px solid #ff8888; } li{ position:relative; float:left; margin:7px; padding:2px; width:60px; height:60px; background-color:#e1e1e1; border:2px solid #e1e1e1; } li.matched{ margin-left:6px; margin-right:6px; width:60px; height:60px; border:3px solid #8888ff; } li.result{ margin-left:6px; margin-right:6px; width:60px; height:60px; border:3px solid #ff8888; } p{ position:relative; float:left; width:16px; height:16px; margin:2px; background-color:#f4f4f4; font-size:1pt; } p.matched{ width:12px; height:12px; border:2px solid #8888ff; } p.result{ width:12px; height:12px; border:2px solid #ff8888; } .matched_addit{ background:#f4f4f4 url('/tags/images/matched_mini.png') center no-repeat; } .srce{ padding:16px 0; text-align:center; } .srce tt{ color:#0088ff; } .tgName{ position:absolute; top:11px; left:45%; font-size:8pt; color:#b2ada1; } li .tgName{ top:24px; left:18px; } li p .tgName{ top:0; left:1px; font-size:7pt; } .top-element{ padding-top:20px; } .clear{clear:both} ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~tt class="tgName"~gt~‹ul›~lt~/tt~gt~ ~lt~ul~gt~ ~lt~li~gt~~lt~tt class="tgName"~gt~‹li›~lt~/tt~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~tt class="tgName"~gt~‹p›~lt~/tt~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~div class="clear" /~gt~ ~lt~/ul~gt~ ~lt~ul~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~/li~gt~ ~lt~li~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~/li~gt~ ~lt~div class="clear" /~gt~ ~lt~/ul~gt~ ~lt~ul~gt~ ~lt~li~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~p~gt~~lt~/p~gt~ ~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~li~gt~~lt~/li~gt~ ~lt~div class="clear" /~gt~ ~lt~/ul~gt~ ~lt~div class="clear top-element"~gt~~lt~p class="result"~gt~~lt~/p~gt~ – найденный элемент.~lt~/div~gt~ ~lt~div class="clear"~gt~~lt~p class="matched"~gt~~lt~/p~gt~ – элементы-потомки найденного элемента.~lt~/div~gt~ ~lt~script~gt~ $('p:first').addClass('result'); $('p:first').parents().addClass('matched'); var $els = $('p:first').parents(), names = $els.map(function(){ return this.nodeName }).get(); $('body').prepend(names.join(', ')); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~