如何用jQuery选择列表视图中间子元素及为其子元素添加CSS类

嘿，我来帮你搞定这两个问题——用jQuery选中列表里的中间子元素，还有给指定子元素添加CSS类的事儿，咱们一步步拆解：

一、先搞定「选择中间子元素」 #

首先得明确你说的“中间”是什么意思：如果子元素数量是奇数，那就是正中间的那个；如果是偶数，可能是中间两个里的某一个，或者两个都要。咱们拿你给的示例（6个<div class="cmsString">）来举例。

步骤1：先拿到所有子元素 #

首先用jQuery选中目标子元素，再获取它们的总数：

// 选中.cmsCLI下的所有.cmsString子元素
const $allItems = $('.cmsCLI .cmsString');
// 获取子元素的总数量
const totalItems = $allItems.length;

步骤2：计算中间元素的索引 #

jQuery里元素的索引是从0开始的，所以计算方式得根据你的需求调整：

• 如果是奇数个元素，正中间的索引就是Math.floor(totalItems / 2)。比如5个元素，5/2=2.5，floor后是2，对应第3个元素（索引2）。
• 如果是偶数个元素，比如你的示例有6个元素：
  • 要是想选左边的中间（比如你的示例里的C，索引2），就用Math.floor((totalItems - 1)/2)，计算下来是(6-1)/2=2.5，floor后是2。
  • 要是想选右边的中间（比如D，索引3），直接用Math.floor(totalItems / 2)，也就是3。
  • 要是两个都要，就用.slice()方法来范围选择。

步骤3：选中中间元素 #

• 选单个中间元素（比如你的示例里的C）：

const middleIndex = Math.floor((totalItems - 1)/2);
const $middleItem = $allItems.eq(middleIndex);

• 选中间两个（比如C和D）：

if (totalItems % 2 === 0) {
  // 从索引2开始，选到索引4（不包含），也就是索引2和3的元素
  const $middleTwoItems = $allItems.slice(2, 4);
}

二、给指定子元素添加CSS类 #

从你的示例来看，你需要给第三个.cmsString（也就是索引2的C）加firstActive类，这里有几种灵活的方法：

方法1：直接按固定索引添加 #

如果你明确知道要选第3个元素，直接用.eq()指定索引（记住是从0开始）：

// 选中第3个.cmsString，添加firstActive类
$('.cmsCLI .cmsString').eq(2).addClass('firstActive');

方法2：动态适配子元素数量（自动选中间元素加类） #

如果子元素数量是动态变化的，想要每次都给中间元素加类，就结合上面的索引计算：

const $allItems = $('.cmsCLI .cmsString');
const totalItems = $allItems.length;
// 这里用你需要的中间索引计算方式，比如选左边中间
const middleIndex = Math.floor((totalItems - 1)/2);
// 给中间元素加类
$allItems.eq(middleIndex).addClass('firstActive');

方法3：批量处理多个列表项 #

如果页面上有多个<li class="cmsCLI">，每个都要处理其中间子元素，就用.each()循环遍历：

$('.cmsCLI').each(function() {
  // 拿到当前列表项里的所有.cmsString
  const $items = $(this).find('.cmsString');
  const total = $items.length;
  const middleIndex = Math.floor((total - 1)/2);
  // 给当前列表项的中间元素加类
  $items.eq(middleIndex).addClass('firstActive');
});

验证你的示例场景 #

你的示例里有6个.cmsString，用Math.floor((6-1)/2)得到索引2，刚好对应元素C，执行代码后就会给它加上firstActive类，和你示例里的效果一致。

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