("parent > child")1.0
Соответствует элементам, удовлетворяющим селектору child, которые при этом являются дочерними (т.е. находятся на первом уровне вложенности) для элементов, удовлетворяющих селектору parent. (В отличие от него, селектор (E F) позволяет искать элементы на всех уровнях вложенности).
Примеры использования:
$('div > span')
| вернет все span-элементы, которые лежат непосредственно внутри div-элементов.
|
$('div > .lBlock')
| вернет элементы с классом line, которые лежат непосредственно в элементах класса lBlock.
|
IE6 не поддерживает аналогичный css-селектор. Однако, в качестве jQuery-селектора он будет работать и в этом браузере.
В действии
Пример 1
Найдем бомбы в коробках (элементы класса bomb, лежащие внутри элементов класса box):
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~script src="/p2p/jquery-1.7.2.min.js"~gt~~lt~/script~gt~
~lt~style~gt~
div{
width: 60px;
height: 60px;
float: left;
padding: 15px;
margin: 5px;
background-color: #EEEEEE;
font-size: 18pt;
}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~div class="box"~gt~ ~lt~p class="fish"~gt~1~lt~/p~gt~ ~lt~/div~gt~
~lt~div class="box"~gt~ ~lt~span class="paper"~gt~ ~lt~p class="bomb"~gt~2~lt~/p~gt~ ~lt~/span~gt~ ~lt~/div~gt~
~lt~div class="box"~gt~ ~lt~p class="panties"~gt~3~lt~/p~gt~ ~lt~/div~gt~
~lt~div class="box"~gt~ ~lt~p class="bomb"~gt~4~lt~/p~gt~ ~lt~/div~gt~
~lt~script~gt~
$('.box > .bomb').parent()
.css('border','3px solid red')
('Бомба, епт!');
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
Замечание: в данном примере, div-элемент под номером 2 не был выделен, поскольку между элементами классов box и bomb есть промежуточный элемент с классом paper. Однако, если бы мы использовали нисходящий селектор $(".box .bomb"), то div-элемент под номером два был бы найден и обведен.
Пример 2
Найдем все дочерние элементы внутри второго ul-элемента, а внутри последнего 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{
background:url('/tags/images/matched.png') 0% 2% no-repeat;
}
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{
background:#e1e1e1 url('/tags/images/matched.png') 5% 5% no-repeat;
}
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{
background:#f4f4f4 url('/tags/images/matched_mini.png') center no-repeat;
}
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~script~gt~
$('ul:eq(1) > *').addClass('result');
$('ul:last *').addClass('result');
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
Ссылки