如何使用JavaScript通过部分类名获取最近的祖先元素？

针对你遇到的问题，有两种常用解决思路，直接用CSS选择器或者手动遍历祖先元素：

方法一：使用CSS属性选择器结合closest() #

closest()方法支持完整的CSS选择器语法，你可以通过属性选择器来匹配包含指定部分类名的元素：

1. 匹配任意位置包含指定字符串的类名
   如果只需要类名中包含parent这个字符串，不管位置，直接用：

document.getElementsByClassName('child')[0].closest('[class*="parent"]')

⚠️ 注意：这种方式会匹配所有class属性里有parent的元素，比如abcparent、parent-2都会被命中，如果有这类元素可能会误匹配。

2. 精准匹配以指定前缀开头的类名
   如果你的目标父元素类名都是以parent-开头（比如parent-1、parent-2），用开头匹配的选择器更稳妥：

document.getElementsByClassName('child')[0].closest('[class^="parent-"]')

3. 匹配类列表中包含指定前缀的类（避免误匹配）
   如果元素有多个类，比如<div class="box parent-1">，想要精准匹配类列表里以parent-开头的项，可以组合两个选择器，覆盖类名在开头和中间的情况：

document.getElementsByClassName('child')[0].closest('[class^="parent-"], [class*=" parent-"]')

方法二：手动遍历祖先元素（自定义逻辑） #

如果需要更灵活的判断规则，比如检查类名是否以指定字符串结尾，或者包含特定后缀，可以自己写函数遍历：

function findClosestByPartialClass(element, partialStr) {
  let current = element.parentElement;
  while (current) {
    // 检查当前元素的类列表中是否有包含partialStr的类
    const hasMatch = Array.from(current.classList).some(className => className.includes(partialStr));
    if (hasMatch) {
      return current;
    }
    current = current.parentElement;
  }
  return null;
}

// 使用示例
const childEl = document.getElementsByClassName('child')[0];
const targetParent = findClosestByPartialClass(childEl, 'parent');

你可以把className.includes(partialStr)改成className.startsWith('parent-')或者className.endsWith('-1')来适配不同的匹配需求。

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