如何判断指定input是否存在带surface-modal类的div祖先元素

要确认指定元素是否存在带有特定类名的div祖先，不管中间隔多少层DOM节点，有两种简洁高效的实现方式：

原生JavaScript实现 #

利用DOM元素的closest()方法，它会从当前元素开始向上遍历DOM树，找到第一个匹配指定选择器的祖先元素（包括自身），找不到则返回null。

针对你的需求（检查最后一个input是否有class为surface-modal的div祖先），代码示例：

// 获取页面最后一个input元素
const targetInput = document.querySelector('input:last-of-type');
// 查找是否存在class为surface-modal的div祖先
const hasTargetAncestor = targetInput.closest('div.surface-modal') !== null;
console.log(hasTargetAncestor); // 你的示例中会输出true

说明：closest('div.surface-modal')确保只匹配div类型且包含surface-modal类的元素，避免误匹配其他标签类型的同名类元素。

jQuery实现 #

如果项目中使用jQuery，同样可以用closest()方法，逻辑和原生一致：

// 获取最后一个input元素
const $targetInput = $('input:last-of-type');
// 判断是否存在目标祖先
const hasTargetAncestor = $targetInput.closest('div.surface-modal').length > 0;
console.log(hasTargetAncestor); // 你的示例中会输出true

如果需要匹配所有符合条件的祖先（而非第一个），可以用parents('div.surface-modal')，但closest()性能更优，因为找到第一个匹配项就会停止遍历。

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