jQuery nth-child用于选择作为其父级的ntg-child的所有元素。 nth-child（n）是“ 1索引”的，表示“ n”的计数从1开始。
例如，
1. $（'tr：nth-child（3）'） –选择与<tr>匹配的所有元素，它们是其父级的第三个孩子。
2. $（'tr：nth-child（3n）'） –选择与<tr>匹配的所有元素，它们是其父级的第三个孩子。
3. $（'tr：nth-child（even）'） –选择所有与<tr>匹配的元素，它们是其父元素的偶数子元素。
PS“偶数”和“奇数”始终用于创建表格斑马条纹效果 。
jQuery示例
一个简单的示例演示使用nth-child函数动态更改表行背景色。
<html>
<head>
<title>jQuery nth-child example</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
<h1>jQuery nth-child example</h1>
<table border=1>
<tr><td>Row #1</td></tr>
<tr><td>Row #2</td></tr>
<tr><td>Row #3</td></tr>
<tr><td>Row #4</td></tr>
<tr><td>Row #5</td></tr>
<tr><td>Row #6</td></tr>
<tr><td>Row #7</td></tr>
<tr><td>Row #8</td></tr>
<tr><td>Row #9</td></tr>
<tr><td>Row #10</td></tr>
</table>
<br/>
<button>:nth-child(4)</button>
<button>:nth-child(3n)</button>
<button>:nth-child(even)</button>
<button>:nth-child(odd)</button>
<script type="text/javascript">
$("button").click(function () {
var str = $(this).text();
$("tr").css("background", "white");
$("tr" + str).css("background", "coral");
});
</script>
</body>
</html>翻译自: https://mkyong.com/jquery/jquery-nth-child-selector-example/
662
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
