如何批量为ul内每个li的首个p元素设置同一class？

因为CSS的:first-child伪类只能直接设置样式，没法给元素添加class属性，所以需要用脚本实现批量操作，下面是两种常用方法：

原生JavaScript实现 #

直接通过DOM API获取元素并批量处理，不需要依赖外部库：

// 获取所有ul下的li元素
const liElements = document.querySelectorAll('ul li');

// 遍历每个li
liElements.forEach(li => {
  // 找到当前li下的第一个p元素
  const firstP = li.querySelector('p:first-child');
  if (firstP) {
    // 添加目标class，比如"first-paragraph"
    firstP.classList.add('first-paragraph');
  }
});

jQuery实现 #

如果项目中已经引入jQuery，可以用更简洁的代码完成：

// 直接选中所有li下的首个p元素，添加class
$('ul li p:first-child').addClass('first-paragraph');

补充说明 #

• 上面代码中的first-paragraph是示例class名，你可以根据需求替换成自己需要的名称
• 执行脚本的时机要确保DOM已经加载完成，比如把代码放在DOMContentLoaded事件回调中，或者放在页面底部

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