:nth-child(index/even/odd/equation)
选择的他们所有父元素的第n个子元素。
jQuery(":nth-child(index/even/odd/equation)")
index:每个相匹配子元素的索引值,从1
开始,也可以是字符串even
或odd
,或一个方程式(例如:nth-child(even)
,:nth-child(4n)
)。
因为jQuery的实现:nth-child(n)
是严格来自CSS规范,所以n
值是“1索引”,也就是说,从1开始计数。对于所有其他选择器表达式,jQuery遵循JavaScript的“0索引”的计数。因此,给定一个单一<ul>
包含两个<li>
,$('li:nth-child(1)')
选择第一个<li>
,而$('li:eq(1)')
选择第二个。
:nth-child(n)
伪类很容易混淆:eq(n)
,即使两个可能导致完全不同的匹配的元素。用:nth-child(n)
时,所有子元素都计算在内,不管它们是什么,并且指定的元素被选中仅匹配连接到伪类选择器。而用:eq(n)
时,只有与这个伪类前面的选择相匹配的元素才会被计数(即,成为候选元素),不限于任何其他元素的孩子,而且第(n +1)个一(n是基于0)被选中。
这个不寻常的用法,可进一步讨论中找到 W3C CSS specification.
注:
看下面一个例子:<div class="test"> <p>A元素</p> <p>B元素</p> <div>C元素</div> <p>D元素</p> </div>
看下面的代码
$("p:nth-child (2)") //B元素被选中
p:nth-child(2)
选择器选择B元素,p:nth-child(2)
选择器要满足的条件是:
- 是一个段落p元素;
- 是父元素的第二个子元素
<div class="test">
的第二个子元素是p元素,所以满足条件,B元素就被中了。jQuery 1.9新增了:nth-of-type()
选择器,和这个:nth-child()
比较容易混淆,具体查看:nth-of-type()
中的比较说明
例子
查找每个匹配的 ul 中的第二个 li,并将它标记出来。
<!DOCTYPE html> <html> <head> <style> div { float:left; } span { color:blue; } </style> <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.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>
这个例子展示了刚才提到的两个容易混淆的选择器是如何工作的。注意这里的:even 和:odd 会无视它们的父元素,而仅仅把元素列表中的元素每隔一个过滤出来。而:nth-child 则会计算子元素在各自父元素中的索引值。
<!DOCTYPE html> <html> <head> <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://www.lanmper.cn/static/js/jquery-3.5.0.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>