带class的:nth-child选择器匹配时忽略指定类问题咨询

:nth-child 选择器的计数规则是从父元素的所有同级子元素开始按顺序计数，不区分子元素的类名、属性，仅按全局排列顺序计算，并不是仅统计你指定选择器匹配到的元素。

你的代码场景分析 #

你当前HTML结构中，ul 下的所有 li 按顺序排列如下：

1. 第1位：<li class="title">Who are you?</li>（奇数位）
2. 第2位：<li class="fields">...</li>（偶数位）
3. 第3位：<li class="title">Where are you?</li>（奇数位）
4. 第4位：<li class="fields">...</li>（偶数位）
5. 第5位：<li class="title">What Do You Do?</li>（奇数位）
6. 第6位：<li class="fields">...</li>（偶数位）

你用$("li.fields")选中的所有带fields类的li，本身在父级的全局排列位置全部是偶数位，所以才会出现你看到的现象：

• 使用:nth-child(odd)过滤时，没有一个fields类的li符合“父级全局奇数位”的要求，不会给任何元素加hide类，所有内容保持展开
• 使用:nth-child(even)过滤时，所有fields类的li都符合“父级全局偶数位”的要求，都会被加上hide类隐藏

如果你要按fields类自身的集合顺序筛选 #

如果你的需求是“在所有匹配到的fields类li里，选择奇数/偶数个元素”，可以通过索引判断实现：

// 示例：隐藏fields类li集合里的第1、3个（对应索引0、2，即常规认知的奇数位）
$(document).ready(function() {
   $("li.fields").filter(function(index) {
     // index从0开始计数，index%2===0对应第1、3、5...个元素
     return index % 2 === 0;
   }).addClass('hide');
});

内容的提问来源于stack exchange，提问作者Alena Chuyankova