如何独立为每个.ulInCollapse的li元素设置分组间隔样式（弃用JS）

优先纯CSS实现（无需JS） #

完全通过CSS选择器即可实现每个.ulInCollapse容器独立处理li样式，不需要额外类名或JS：

/* 每组第一个li（奇数位置）添加上下内边距 */
.ulInCollapse li:nth-child(2n+1) {
    padding: 15px 0;
}

/* 每组第二个li（偶数位置）取消上下内边距 */
.ulInCollapse li:nth-child(2n) {
    padding: 0;
}

效果说明： #

• 每个.ulInCollapse下的li会按自身位置独立计算：第1、3、5...个li（每组第一个）自动获得15px上下内边距；
• 第2、4、6...个li（每组第二个）内边距为0；
• 当容器内li总数为奇数时，最后一个li属于奇数位置，自动保留15px上下内边距；总数为偶数时，最后一个li是偶数位置，内边距为0，完全符合需求。

修正后的JS方案（备用） #

如果因为兼容性问题需要用JS，修正你之前代码的两个核心错误：

1. 获取当前ul下的li数量，而非直接用ul元素的length；
2. 选择当前ul下的最后一个li，而非全局选择。

const ulList = document.querySelectorAll(".ulInCollapse");
ulList.forEach(ul => {
  // 获取当前ul下的li总数
  const liCount = ul.querySelectorAll('li').length;
  // 获取当前ul下的最后一个li
  const lastLi = ul.querySelector('li:last-child');
  
  if (liCount % 2 !== 0) {
    lastLi.style.paddingTop = "15px";
  } else {
    lastLi.style.paddingTop = "0px";
  }
});

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