如何用原生JavaScript判断输入元素是否处于指定类容器中

核心实现代码 #

先获取目标input元素，再通过DOM方法判断它是否处于目标容器中：

// 获取目标input元素
const targetInput = element.closest('form').querySelector('input[name=' + name + ']');
// 判断是否位于input-container容器内
const isInInputContainer = targetInput?.closest('.input-container') !== null;

逻辑说明 #

• targetInput?.closest('.input-container')：从目标input元素开始向上遍历DOM树，查找最近的带有input-container类的元素。找到则返回该容器元素，找不到则返回null。
• 基于返回值判断结果：
  • 示例1里，input直接在input-container容器内，closest()会匹配到该div，结果返回true。
  • 示例2里，input和input-container容器同级，不存在包含它的目标容器，closest()返回null，结果返回false。

特殊情况调整 #

如果需求要求input必须是input-container的子元素（而非自身带有该类），可修改判断逻辑：

const isInInputContainer = targetInput?.parentElement.closest('.input-container') !== null;

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