The jQuery : element sub-elements nth-child (n) is selected as a match for the n-th element of the parent (or a specific order), packaged as jQuery object and returns.
Opposite the selector is : nth-last-child (n ) is selected , for matching the reciprocal of a parent element of the n-th (or the reciprocal order to meet specific) sub-elements.
Note: : Nth-Child (n-) selected with : eq (index) selector differs in that:
: eq (index) selector matches only one element, and all the matching element in the first index + 1element ( index indexmeasured from the start 0);
: Nth-Child (n-) selector determines whether it is necessary to match the first element is the parent element of the nsub-elements, or meet other specific requirements (number ncounted from the start 1), if it is reservations, or they will be discarded.
§ grammar
jQuery 1.1.4 new selector.
// 这里的selector表示具体的选择器
// 这里的n表示具体的序号或者符合要求的表达式
jQuery( "selector:nth-child(n)" )§ Parameters
| parameter | description |
|---|---|
| selector | A selector effective. |
| n | Assigned number, from 1 starts counting. |
Parameter nis generally a natural number indicating a parent element of the nsub-elements. For example: : Nth-Child (2) shows a second sub-element as the parent element.
Parameters ncan also be (only use the expression in the letter to a specific expressions n
represents a natural number, upper or lower case). E.g:
- : Nth-child (odd) which matches the odd elements of the parent element (1,3,5,7 ...... th) sub-elements;
- : Nth-child (even) represents an even number as the element of the parent element matching (2,4,6,8 ...... th) sub-elements;
- : nth-child (3n) indicates a match, as an element of the parent
3nelement of the sub-elements (n represents a natural number including zero, the same below); - : nth-child (3n + 1 ) indicates a match of a parent element of the
3n+1child element of the element; - : nth-child (3n + 2 ) indicates a match of a parent element of the
3n+2child element of the element;
§ return value
Back jQuery object encapsulates the matched elements.
If you can not find any corresponding match, an empty jQuery object is returned.
First jQuery based on selector selectorto find all matching elements, look at whether they are the children of the parent element matches the specified order, if it is retained, otherwise discard the element.
§ Example & Description
HTML paragraph with the following code as an example:
<div id="n1"> <div id="n2"> <ul id="n3"> <li id="n4" class="c">item1</li> <li id="n5">item2</li> <li id="n6" class="c">item3</li> </ul> </div> <div id="n7"> <ul id="n8"> <li id="n9">item1</li> <li id="n10">item2</li> </ul> </div> </div>Now, we want to find its first two ul li tags for each tag, you can write the following jQuery code:
// 选择了id分别为n5、n10的两个元素
$("ul li:nth-child(2)");Next, find a natural order for each label li ul odd label, you can write the following jQuery code:
// 选择了id分别为n4、n6、n9的3个元素
$("ul li:nth-child(odd)");Finding natural order of each parent tag ul 3nof label li, jQuery code corresponds to the following:
// 选择了id为n6的一个元素
// 虽然这里用的#n1进行限定，实际上jQuery先是通过查找所有匹配#n1 li的元素，然后再看这些元素是不是父元素的第3n个元素，如果是就保留，否则就舍弃掉。
$("#n1 li:nth-child(3n)");Find all containing the class name c
li tag, and they must be even-order child elements of the parent element, we can write the following jQuery code:
// 没有选择任何元素，返回空的jQuery对象
// 虽然匹配li.c的有n4、n6两个元素，但它们都不是父元素的偶数顺序的子元素，因此无法匹配
$("li.c:nth-child(even)");