如何为包含<li id="item1">的父级<ul>添加act类？前端技术求助

没问题，这个需求很清晰——给目标<li>的父级<ul>添加指定类名。下面给你几种实用的实现方式，适配不同的项目场景：

原生JavaScript实现（无依赖） #

这是最通用的方案，不需要引入任何库：

// 1. 获取目标li元素
const targetLi = document.getElementById('item1');
// 2. 获取它的父级ul元素
const parentUl = targetLi.parentElement;
// 3. 给父级ul添加类名
parentUl.classList.add('act');

解释：

• parentElement会直接返回当前元素的父级元素节点，刚好对应我们需要的<ul>；
• classList.add()是现代浏览器推荐的操作类名的方法，它不会覆盖元素原有类名，还能自动避免重复添加同一个类。

如果需要兼容旧版IE（IE10及以下），可以改用className属性：

const targetLi = document.getElementById('item1');
const parentUl = targetLi.parentNode;
// 注意前面加空格，避免和原有类名拼接在一起
parentUl.className += ' act';

jQuery实现（项目已引入jQuery时） #

如果你的项目已经用了jQuery，代码会更简洁直观：

$('#item1').parent('ul').addClass('act');

解释：

• $('#item1')快速选中目标<li>；
• parent('ul')精准筛选出它的父级<ul>（避免意外选中其他可能的父元素）；
• addClass('act')完成类名添加。

执行以上任意一种代码后，你的DOM结构就会变成你期望的样子：

<ul class="act">
  <li id="item1"></li>
</ul>
<ul>
  <li id="item2"></li>
</ul>

内容的提问来源于stack exchange，提问作者Fabio Maximo Chagas