jQuery实现多ul下li点击选中色切换且跨ul操作互不影响（无需id）

你之前的实现问题，本质是移除选中态的操作范围没有限定在当前li所属的ul内部，直接全局匹配了所有.list下的li元素做清除，才会导致跨ul点击时其他ul的选中状态被误删。整个方案不需要给循环渲染的ul加id标识，靠DOM本身的父子层级就能精准控制操作范围，哪怕页面上有任意数量的循环渲染ul都能正常运行。

具体实现步骤 #

• 保持原有的事件绑定逻辑：给所有类名为list的ul绑定点击事件，无需单独给每个li绑定监听，天然适配动态循环渲染的结构
• 点击事件触发时，首先判断点击目标是否属于li元素：通过closest('li')方法匹配，哪怕点击的是li内部嵌套的子元素（图标、文本、按钮等），也能正确捕获到对应的li节点
• 缩小操作范围：拿到当前点击li所属的ul容器，用li.closest('ul.list')即可精准定位，无需手动传id做区分
• 做选中态切换时，仅在定位到的这个ul内部查找所有带active类的li，清除它们的active样式，再给当前点击的li添加active类

示例代码 #

原有错误逻辑（会导致跨ul清除选中态） #

// 给所有.list的ul绑定事件
document.querySelectorAll('ul.list').forEach(ul => {
  ul.addEventListener('click', (e) => {
    const targetLi = e.target.closest('li')
    if (!targetLi) return
    // 错误点：全局查询所有.list下的li，导致操作范围越界
    document.querySelectorAll('ul.list li.active').forEach(item => item.classList.remove('active'))
    targetLi.classList.add('active')
  })
})

修正后正确逻辑 #

// 事件绑定逻辑完全不变
document.querySelectorAll('ul.list').forEach(ul => {
  ul.addEventListener('click', (e) => {
    const targetLi = e.target.closest('li')
    if (!targetLi) return
    // 修正点：以当前点击li所属的ul为唯一操作范围
    const currentScopeUl = targetLi.closest('ul.list')
    // 仅在当前ul内部清除已有选中态，不会越界影响其他ul
    currentScopeUl.querySelectorAll('li.active').forEach(item => item.classList.remove('active'))
    targetLi.classList.add('active')
  })
})

方案优势 #

• 无侵入式适配：不管ul是静态写的还是循环渲染生成的，哪怕后续动态新增新的.list容器，只要保持DOM结构层级正确，逻辑都能正常运行，完全不需要额外的id标识
• 操作范围隔离：每个ul的选中态切换仅在自身DOM范围内生效，跨ul点击时完全不会修改其他ul内部的类名，自然不会丢失之前保存的选中样式
• 兼容性适配：closest方法可以正确匹配li内部嵌套的子元素点击场景，不会因为点击点落在li的非文本元素上触发逻辑失效

如果是在Vue、React等框架下实现，思路完全一致：不要用全局状态存储所有ul的选中值，给每个ul组件维护独立的内部选中状态，切换时仅更新当前ul对应选中项的状态即可，同样不需要额外的id区分。

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