:last-child1.1.4
Соответствует элементам, которые идут последними в своих непосредственных предках.
Примеры использования:
| $('div:last-child')
| вернет все div-элементы, которые идут последними в своих предках.
|
| $('div.lBox:last-child')
| вернет все div-элементы класса lBox, которые идут последними в своих предках.
|
В отличии от селектора :last, который находит последний из найденных элементов (то есть результатом будет всегда один элемент), :last-child отфильтрует выбранные элементы, оставив только те, которые идут последними в своих предках. Это различие демонстрируется в следующем примере.
В действии
Пример 1
Найдем и выделим красной рамкой все элементы p, которые лежат последними внутри своих родителей. Кроме этого, найдем последний 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{
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~/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~ – выбранные с помощью :last-child p-элементы.~lt~/div~gt~
~lt~div class="clear"~gt~~lt~p class="matched_addit"~gt~~lt~/p~gt~ – выбранные с помощью :last p-элементы.~lt~/div~gt~
~lt~script~gt~
$('ul p:last-child').addClass('result');
$('ul p:last').addClass('matched');
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
Пример 2
Найдем мужчин, стоящих в конце очереди (элементы класса men, находящиеся в конце элементов с классом queue (очередь)):
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~
~lt~style~gt~
.man, .woman{
width: 50px;
height: 25px;
float: left;
padding: 12px;
margin: 5px;
background-color: #eee;
font-size: 10pt;
}
.queue{
float: left;
width: 85px;
padding: 15px;
margin: 5px;
background-color: #eeffee;
font-size: 14pt;
text-align:center;
}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~div class="queue"~gt~
Колбаса
~lt~div class="woman"~gt~Жанна~lt~/div~gt~
~lt~div class="man"~gt~Петр~lt~/div~gt~
~lt~div class="woman"~gt~Алла~lt~/div~gt~
~lt~/div~gt~
~lt~div class="queue"~gt~
Хлеб
~lt~div class="woman"~gt~Тетя Клава~lt~/div~gt~
~lt~div class="woman"~gt~Людмила~lt~/div~gt~
~lt~div class="man"~gt~Карл~lt~/div~gt~
~lt~/div~gt~
~lt~div class="queue"~gt~
Алкоголь
~lt~div class="man"~gt~Бродяга Трофим~lt~/div~gt~
~lt~div class="man"~gt~Иван~lt~/div~gt~
~lt~div class="man"~gt~Колька~lt~/div~gt~
~lt~/div~gt~
~lt~script~gt~
$('.queue .man:last-child')
.css({'border':'1px solid red'});
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
Ссылки