Because jQuery's implementation of :nth-
selectors is strictly derived from the CSS specification, the value of n
is "1-indexed", meaning that the counting starts at 1. For other selector expressions such as :eq()
or :even
jQuery follows JavaScript's "0-indexed" counting. Given a single <ul>
containing two <li>
s, $( "li:nth-child(1)" )
selects the first <li>
while $( "li:eq(1)" )
selects the second.
The :nth-child(n)
pseudo-class is easily confused with :eq(n)
, even though the two can result in dramatically different matched elements. With :nth-child(n)
, all children are counted, regardless of what they are, and the specified element is selected only if it matches the selector attached to the pseudo-class. With :eq(n)
only the selector attached to the pseudo-class is counted, not limited to children of any other element, and the (n+1)th one (n is 0-based) is selected.
Further discussion of this unusual usage can be found in the W3C CSS specification.
Find the second li in each matched ul and note it.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>nth-child demo</title> <style> div { float: left; } span { color: blue; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <div> <ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> </div> <div> <ul> <li>Sam</li> </ul> </div> <div> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> <li>David</li> </ul> </div> <script> $( "ul li:nth-child(2)" ).append( "<span> - 2nd!</span>" ); </script> </body> </html>
This is a playground to see how the selector works with different strings. Notice that this is different from the :even and :odd which have no regard for parent and just filter the list of elements to every other one. The :nth-child, however, counts the index of the child to its particular parent. In any case, it's easier to see than explain so...
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>nth-child demo</title> <style> 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; } </style> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <div> <button>:nth-child(even)</button> <button>:nth-child(odd)</button> <button>:nth-child(3n)</button> <button>:nth-child(2)</button> </div> <div> <button>:nth-child(3n+1)</button> <button>:nth-child(3n+2)</button> <button>:even</button> <button>:odd</button> </div> <div> <table> <tr><td>John</td></tr> <tr><td>Karl</td></tr> <tr><td>Brandon</td></tr> <tr><td>Benjamin</td></tr> </table> </div> <div> <table> <tr><td>Sam</td></tr> </table> </div> <div> <table> <tr><td>Glen</td></tr> <tr><td>Tane</td></tr> <tr><td>Ralph</td></tr> <tr><td>David</td></tr> <tr><td>Mike</td></tr> <tr><td>Dan</td></tr> </table> </div> <span>tr<span id="inner"></span></span> <script> $( "button" ).click(function() { var str = $( this ).text(); $( "tr" ).css( "background", "white" ); $( "tr" + str ).css( "background", "#ff0000" ); $( "#inner" ).text( str ); }); </script> </body> </html>
Please login to continue.