jQuery in Action
26
CHAPTER 2
Creating the wrapped element set
There is one quick gotcha (isn't there always?). The
nth-child
selector starts
counting from 1, whereas the other selectors start counting from 0. For
CSS
com-
patibility,
nth-child
starts with 1, but the jQuery custom selectors follow the more
common programming convention of starting at 0. With some use, it becomes
second nature to remember which is which, but it may be a bit confusing at first.
second nature to remember which is which, but it may be a bit confusing at first.
Let's dig in some more.
Consider the following table, containing a list of some programming languages
Consider the following table, containing a list of some programming languages
and some basic information regarding them:
<table id="languages">
<thead>
<tr>
<th>Language</th>
<th>Type</th>
<th>Invented</th>
</tr>
</thead>
<tbody>
<tr>
<td>Java</td>
<td>Static</td>
<td>1995</td>
</tr>
<tr>
<td>Ruby</td>
<td>Dynamic</td>
<td>1993</td>
</tr>
<tr>
<td>Smalltalk</td>
:nth-child(Xn+Y)
The nth child element computed by the supplied formula. If Y is 0, it may
be omitted. li:nth-child(3n) returns every third item, whereas
be omitted. li:nth-child(3n) returns every third item, whereas
li:nth-child(5n+1)
returns the item after every fifth element.
:even and :odd
Even and odd matching elements page-wide. li:even returns every even
list item.
:eq(n)
The nth matching element.
:gt(n)
Matching elements after (and excluding) the nth matching element.
:lt(n)
Matching elements before (and excluding) the nth matching element.
Table 2.2 The more advanced positional selectors supported by jQuery: selecting elements based
on their position in the DOM (continued)
on their position in the DOM (continued)
Selector
Description