如何使用jQuery Odd选择器分别处理独立ul标签的奇数索引li？

这是个很常见的jQuery选择器陷阱——:odd是基于整个匹配集合的索引来筛选的，而不是每个父容器内部的。要实现每个ul单独处理内部li的奇数位置（也就是你需要的list1第1、3、5个，list2第1、3个），有两种简洁的方法：

方法一：使用:nth-child(odd)选择器（推荐） #

这个CSS原生选择器是针对每个父元素来选择它的奇数位置子元素（位置从1开始计数），完美匹配你的需求：

$('.test ul li:nth-child(odd)').addClass('red');

它会分别在list1和list2内部独立判断，各自选中对应奇数位置的li，然后添加red类，完全符合你的预期。

方法二：遍历每个ul单独处理 #

如果你需要更灵活的自定义逻辑，也可以先遍历每个ul，再在内部筛选目标li：

$('.test ul').each(function() {
  // 注意：jQuery的`:even`是基于0开始的索引，对应视觉上的第1、3、5个位置
  $(this).find('li:even').addClass('red');
});

这种方法先定位到每个ul容器，再在容器内部筛选li，避免了跨容器的索引干扰。

为什么原来的代码不符合需求？ #

你之前用的$('.test li:odd')会把所有.test下的li合并成一个大集合，然后按整个集合的索引（从0开始）选择奇数索引的元素。比如list1的5个li占索引0-4，list2的4个li占索引5-8，:odd会选中索引1、3、5、7的元素，对应list1的第2、4个li和list2的第2、4个li，这就是为什么结果不符合预期的原因。

内容的提问来源于stack exchange，提问作者Aki T