:nth-child(arg)1.1.4 :nth-child-last(arg)1.9
Соответствует элементам, которые расположены в своих непосредственных предках по определенным условиям. Различия двух представленных селекторов заключается только в том, что :nth-child-last() рассматривает позиции элементов в обратном порядке (т. е. с конца).
Стоит иметь ввиду, что нумерация позиций начинается не с 0, а с 1!
Параметр arg может принимать следующие значения:
- index — номер позиции элемента, внутри его непосредственного родителя.
- even — элементы, находящиеся на четных позициях, внутри его непосредственного родителя.
- odd — элементы, находящиеся на нечетных позициях, внутри его непосредственного родителя.
- equation — выражение, описывающее номер позиции элемента, внутри его непосредственного родителя. Выражение должно быть целочисленным и зависеть от n. Например 2n+1 соответствует элементам с позициями 1, 3, 5 и далее. 3n+2 соответствует элементам с позициями 2, 5, 8. (то есть вместо n будут подставляться значения 0, 1, 2 и далее).
Примеры использования:
$('div:nth-child(3)')
| вернет все div-элементы, которые находятся в своих непосредственных предках третьими по счету.
|
$('div:nth-child(odd)')
| вернет все div-элементы, которые находятся в своих непосредственных предках на нечетных позициях.
|
$('div:nth-child(even)')
| вернет все div-элементы, которые находятся в своих непосредственных предках на четных позициях
|
$('div:nth-child(2n+3)')
| вернет все div-элементы, которые в непосредственных предках находятся на позиции с номерами удовлетворяющими выражению 2n+3 (5, 7, 9...).
|
Многие селекторы, например :eq(n), :even, :lt() и другие, фильтруют выбранные элементы, в зависимости от их расположения в наборе выбранных элементов. В отличии от них, :nth-child() и :nth-last-child() производят фильтрацию, опираясь на их расположение в непосредственных предках.
В действии
Пример 1
Отметим мужчин, стоящих в очереди на четных местах (элементы класса 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:nth-child(even)')
.css({'border':'1px solid red'});
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
Пример 2
Продемонстрируем как работает :nth-child() с разными параметрами, а так же некоторые другие селекторы со схожими предназначениями:
~lt~!doctype html~gt~
~lt~html lang="en"~gt~
~lt~head~gt~
~lt~meta charset="utf-8"~gt~
~lt~title~gt~nth-child demo~lt~/title~gt~
~lt~style~gt~
button { display:block; font-size:12px; width:100px; }
div { float:left; margin:10px; font-size:10px;
border:1px solid black; }
span { color:blue; font-size:18px; }
#inner { color:red; }
td { width:50px; text-align:center; }
~lt~/style~gt~
~lt~script src="http://code.jquery.com/jquery-1.9.1.js"~gt~~lt~/script~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~div~gt~
~lt~button~gt~:nth-child(even)~lt~/button~gt~
~lt~button~gt~:nth-child(odd)~lt~/button~gt~
~lt~button~gt~:nth-child(3n)~lt~/button~gt~
~lt~button~gt~:nth-child(2)~lt~/button~gt~
~lt~/div~gt~
~lt~div~gt~
~lt~button~gt~:nth-child(3n+1)~lt~/button~gt~
~lt~button~gt~:nth-child(3n+2)~lt~/button~gt~
~lt~button~gt~:even~lt~/button~gt~
~lt~button~gt~:odd~lt~/button~gt~
~lt~/div~gt~
~lt~div~gt~
~lt~table~gt~
~lt~tr~gt~~lt~td~gt~John~lt~/td~gt~~lt~/tr~gt~
~lt~tr~gt~~lt~td~gt~Karl~lt~/td~gt~~lt~/tr~gt~
~lt~tr~gt~~lt~td~gt~Brandon~lt~/td~gt~~lt~/tr~gt~
~lt~tr~gt~~lt~td~gt~Benjamin~lt~/td~gt~~lt~/tr~gt~
~lt~/table~gt~
~lt~/div~gt~
~lt~div~gt~
~lt~table~gt~
~lt~tr~gt~~lt~td~gt~Sam~lt~/td~gt~~lt~/tr~gt~
~lt~/table~gt~
~lt~/div~gt~
~lt~div~gt~
~lt~table~gt~
~lt~tr~gt~~lt~td~gt~Glen~lt~/td~gt~~lt~/tr~gt~
~lt~tr~gt~~lt~td~gt~Tane~lt~/td~gt~~lt~/tr~gt~
~lt~tr~gt~~lt~td~gt~Ralph~lt~/td~gt~~lt~/tr~gt~
~lt~tr~gt~~lt~td~gt~David~lt~/td~gt~~lt~/tr~gt~
~lt~tr~gt~~lt~td~gt~Mike~lt~/td~gt~~lt~/tr~gt~
~lt~tr~gt~~lt~td~gt~Dan~lt~/td~gt~~lt~/tr~gt~
~lt~/table~gt~
~lt~/div~gt~
~lt~span~gt~фильтр~lt~span id="inner"~gt~: ...~lt~/span~gt~~lt~/span~gt~
~lt~script~gt~
$('button').click(function () {
var str = $(this).text();
$('tr').css('background', 'white');
$('tr' + str).css('background', '#ff0000');
$('#inner').text(str);
});
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
Ссылки