jQuery :nth-of-type()选择器：按同类型兄弟元素精准定位-代码号

在处理页面中重复出现的同类元素时，比如一篇文章里穿插着多个段落、多个标题，或者一个列表里不同类型的列表项混排，我们常常需要按某种规律选中其中一部分进行操作。:nth-of-type() 选择器正是为这种场景设计的——它基于元素在同类型兄弟节点中的位置来筛选，而不是在所有兄弟节点中的绝对位置。

核心机制：只看同类型，不看其他

这一点是 :nth-of-type() 和 :nth-child() 的本质区别所在。:nth-child() 在计数时把父元素下所有类型的子元素都算进去，而 :nth-of-type() 只统计与目标元素相同标签类型的那些兄弟。

举个例子：一个 div 里依次放着 <h3>、<p>、<p>、<h3>，如果你想选中第二个 <h3>，用 :nth-child(4) 和 :nth-of-type(2) 都能命中它。但如果中间插入了其他类型的标签，:nth-child() 的索引就对不上了，而 :nth-of-type() 依然能准确识别。在一个内容结构频繁变动的页面里，:nth-of-type() 的容错能力明显更强。

这也是我个人比较偏好 :nth-of-type() 的一个原因——在项目中，DOM结构很难保持始终如一的整洁，偶尔会有零散的 <br>、<span> 或注释节点混进来，:nth-child() 容易被这些干扰项打乱计数。

语法与参数

$("selector:nth-of-type(n | odd | even | formula)")

参数值可以有以下几种形式：

n：一个整数。表示选中同类型兄弟中的第 n 个。注意和jQuery的 index() 不同，这里的计数从 1 开始，不是从0开始。
odd：选中所有同类型兄弟中序号为奇数的元素（第1、3、5…个）。
even：选中所有同类型兄弟中序号为偶数的元素（第2、4、6…个）。
formula：一个形如 an+b 的数学公式。其中 a 是周期长度，b 是偏移量，n 从0开始依次取整。比如 3n+1 表示每3个一组取第1个，即选中序号为1、4、7…的元素。

实战示例：用四种参数筛选商品卡片

下面这个例子模拟一个电商列表页。页面上有多个商品卡片（用 <div class="card"> 表示），每个卡片内可能有标题 <h4> 和描述 <p>。底部提供了四个按钮，分别演示整数、odd、even 和公式四种参数的实际效果。这里我们选择对 <h4> 标题进行高亮，让效果更直观。

<html>
<head>
<meta charset="UTF-8">
<title>jQuery :nth-of-type() 选择器示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
  .card {
    border: 1px solid #ddd;
    padding: 12px;
    margin: 8px 0;
    border-radius: 4px;
  }
  .card h4 {
    margin: 0 0 6px 0;
  }
  .card p {
    margin: 0;
    color: #666;
  }
  .btn-group {
    margin: 15px 0;
  }
  .btn-group button {
    margin-right: 6px;
    padding: 6px 14px;
    cursor: pointer;
  }
</style>
</head>
<body>

<h3>:nth-of-type() 选择器——四种参数效果对比</h3>
<p>下方是一组商品卡片，点击按钮观察哪些标题被高亮。</p>

<div class="card">
  <h4>商品A：蓝牙耳机</h4>
  <p>高性价比入耳式耳机</p>
</div>
<div class="card">
  <h4>商品B：机械键盘</h4>
  <p>青轴87键白色背光</p>
</div>
<div class="card">
  <h4>商品C：无线鼠标</h4>
  <p>人体工学静音设计</p>
</div>
<div class="card">
  <h4>商品D：显示器支架</h4>
  <p>双屏升降旋转臂</p>
</div>
<div class="card">
  <h4>商品E：USB扩展坞</h4>
  <p>7合1Type-C接口</p>
</div>
<div class="card">
  <h4>商品F：移动硬盘</h4>
  <p>1TB便携式存储</p>
</div>

<div class="btn-group">
  <button id="btn-n">选中第1个 (n=1)</button>
  <button id="btn-odd">选中奇数项 (odd)</button>
  <button id="btn-even">选中偶数项 (even)</button>
  <button id="btn-formula">公式 3n+3 (第3、6…)</button>
</div>

<script>
$(document).ready(function(){
  // 重置所有h4的背景色
  function resetAll(){
    $("h4").css("background-color", "transparent");
  }

  // 按钮1：整数参数，选中第1个h4
  $("#btn-n").click(function(){
    resetAll();
    $("h4:nth-of-type(1)").css("background-color", "#ffeaa7");
  });

  // 按钮2：odd参数，选中奇数位置的h4（第1、3、5...）
  $("#btn-odd").click(function(){
    resetAll();
    $("h4:nth-of-type(odd)").css("background-color", "#dfe6e9");
  });

  // 按钮3：even参数，选中偶数位置的h4（第2、4、6...）
  $("#btn-even").click(function(){
    resetAll();
    $("h4:nth-of-type(even)").css("background-color", "#55efc4");
  });

  // 按钮4：公式 3n+3，选中第3、6、9...个h4
  $("#btn-formula").click(function(){
    resetAll();
    $("h4:nth-of-type(3n+3)").css("background-color", "#74b9ff");
  });
});
</script>

</body>
</html>

四个按钮的效果一目了然：

第一个按钮只高亮"商品A"，因为它在所有 <h4> 兄弟中排在第一个。
第二个按钮高亮A、C、E三个奇数次商品。
第三个按钮高亮B、D、F三个偶数次商品。
第四个按钮用公式 3n+3，n=0时是3，n=1时是6，所以高亮了C和F。

在项目里，odd 和 even 常用于实现表格的斑马纹效果，而 an+b 公式则在需要周期性复用的布局模式中比较常见，比如每三张卡片一组给之后一张一个特殊样式。

本节课程知识要点

:nth-of-type() 选择器基于元素在同类型兄弟节点中的位置进行筛选，计数从 1 开始，忽略其他类型的兄弟元素。
参数 odd 和 even 分别匹配同类型兄弟中序号为奇数和偶数的元素，适用于表格行交替着色、列表项斑马纹等场景。
公式参数 an+b 中，a 表示循环周期，b 表示偏移量，n 从0开始递增，例如 3n+3 会匹配序号为3、6、9、12…的元素。
与 :nth-child() 的关键区别在于：:nth-child() 按父元素下所有子元素的绝对位置计数，:nth-of-type() 只按同标签类型计数，在DOM结构有混合类型时后者更稳定。
在动态内容较多的页面中，如果目标元素的兄弟节点里可能夹杂 <br>、<script> 等标签，优先使用 :nth-of-type() 可以避免因非目标标签干扰导致的索引偏移问题。