如何用jQuery自动为nth-child元素添加序号？

不用逐个手动设置，用jQuery的遍历方法就能一键搞定，代码如下：

$("page:nth-child(n+2) .footer .page-no span").each(function(index) {
  $(this).text(index + 1);
});

代码说明： #

• page:nth-child(n+2) 直接选中从第2个开始的所有page元素（n从0开始计数，n+2对应第2、3、4...个元素）
• .each() 会遍历每个匹配到的span元素，遍历的索引index从0开始，所以第2个page对应的索引是0，加1后正好是你要的“1”，完美匹配需求

如果不习惯:nth-child的写法，也可以换这种思路：先选中所有page元素，跳过第一个再处理：

$("page").slice(1).find(".footer .page-no span").each(function(index) {
  $(this).text(index + 1);
});

额外方案：纯CSS实现（静态场景更高效） #

如果你的页面不需要动态修改页码，用CSS计数器更省事，完全不用写JS：

body {
  counter-reset: pageNum; /* 初始化计数器 */
}

page:nth-child(n+2) {
  counter-increment: pageNum; /* 从第二个page开始递增计数器 */
}

page:nth-child(n+2) .footer .page-no span::before {
  content: counter(pageNum); /* 将计数器值填充到span中 */
}

内容的提问来源于stack exchange，提问作者Joungmin Shin