如何用jQuery为复杂列表中的.title元素按序号添加背景类

开发者阿泽

2026-5-15

解决方法：用jQuery精准定位特定索引的.title元素

嘿，我完全懂你的困扰！因为CSS的:nth-child和:nth-of-type都是基于父元素下所有同级元素来计数的，而你的.title和.item是混在一起的，所以用CSS选择器根本没法只针对.title的顺序来选——这时候jQuery的元素集合索引就派上大用场了！

方案1：直接用`eq()`定位单个元素

jQuery的eq()方法是在你选中的元素集合内部按索引取值（索引从0开始），完全不受其他同级元素干扰。假设你准备了三个背景类bg-1、bg-2、bg-3，可以这么写：

// 先获取所有的.title元素集合
const $titles = $('li.title');

// 给第1个.title加类（索引0）
$titles.eq(0).addClass('bg-1');
// 给第2个.title加类（索引1）
$titles.eq(1).addClass('bg-2');
// 给第3个.title加类（索引2）
$titles.eq(2).addClass('bg-3');

方案2：用`each()`遍历批量处理

如果你的.title数量可能超过3个，只想给前3个加类，用each()遍历会更灵活，还能动态生成类名：

$('li.title').each(function(index) {
  // 只处理前3个元素（index从0开始，所以index < 3对应第1-3个）
  if (index < 3) {
    // 动态生成类名，比如bg-1、bg-2、bg-3
    $(this).addClass(`bg-${index + 1}`);
  }
});