JavaScript中判断Input元素是否嵌套在特定CSS类容器内

/**
 * 检查指定名称的input元素是否位于特定CSS类容器内。
 * @param {string} inputName - 要查找的input元素的name属性值。
 * @param {string} containerClass - 父容器的CSS类名，例如 'input-container'。
 * @returns {boolean|null} 如果在容器内返回true，不在容器内返回false，如果不存在则返回null。
 */
function checkInputInContainer(inputName, containerClass) {
    // 1. 尝试查找位于指定类容器内部的input元素
    // 例如：.input-container [name="realname"]
    if (document.querySelector(`.${containerClass} [name="${inputName}"]`)) {
        console.log(`Input with name "${inputName}" is IN .${containerClass}.`);
        return true;
    }
    // 2. 如果不在容器内，则检查input元素是否独立存在于文档中
    else if (document.querySelector(`[name="${inputName}"]`)) {
        console.log(`Input with name "${inputName}" is OUTSIDE .${containerClass}.`);
        return false;
    }
    // 3. input元素不存在
    else {
        console.log(`Input with name "${inputName}" does NOT exist.`);
        return null;
    }
}

// --- 示例1：Input元素在容器内 ---
console.log("--- 示例1：Input元素在容器内 ---");
// 模拟HTML结构
document.body.innerHTML = `
    <div class="input-container">
        <input type="text" name="realname">
    </div>
    <div id="other-content"></div>
`;
checkInputInContainer('realname', 'input-container'); // 预期输出: IN

// --- 示例2：Input元素在容器外 ---
console.log("\n--- 示例2：Input元素在容器外 ---");
// 模拟HTML结构
document.body.innerHTML = `
    <div class="input-container"></div>
    <input type="hidden" name="id" value="1">
    <div id="other-content"></div>
`;
checkInputInContainer('id', 'input-container'); // 预期输出: OUTSIDE

// --- 示例3：Input元素不存在 ---
console.log("\n--- 示例3：Input元素不存在 ---");
// 模拟HTML结构
document.body.innerHTML = `
    <div></div>
    <div id="other-content"></div>
`;
checkInputInContainer('nonexistent', 'input-container'); // 预期输出: DOES NOT exist

/**
 * 检查给定的input元素是否位于特定CSS类容器内。
 * @param {HTMLElement} inputElement - 要检查的input元素引用。
 * @param {string} containerClass - 父容器的CSS类名，例如 'input-container'。
 * @returns {boolean|null} 如果在容器内返回true，不在容器内返回false，如果inputElement无效则返回null。
 */
function checkInputInContainerUsingClosest(inputElement, containerClass) {
    if (!inputElement || !(inputElement instanceof HTMLElement)) {
        console.log("提供的input元素无效。");
        return null;
    }
    // 检查inputElement的最近祖先是否匹配指定的类
    // 例如：inputElement.closest('.input-container')
    if (inputElement.closest(`.${containerClass}`)) {
        console.log(`Input element is IN .${containerClass}.`);
        return true;
    } else {
        console.log(`Input element is NOT IN .${containerClass}.`);
        return false;
    }
}

// 模拟HTML结构
document.body.innerHTML = `
    <div class="input-container">
        <input type="text" name="realname">
    </div>
    <input type="hidden" name="id" value="1">
    <div id="other-content"></div>
`;

// 获取input元素引用
const realnameInput = document.querySelector('input[name="realname"]');
const idInput = document.querySelector('input[name="id"]');
const nonexistentInput = document.querySelector('input[name="nonexistent"]');

console.log("\n--- 使用 Element.closest() 示例 ---");
checkInputInContainerUsingClosest(realnameInput, 'input-container'); // 预期: true
checkInputInContainerUsingClosest(idInput, 'input-container');     // 预期: false
checkInputInContainerUsingClosest(nonexistentInput, 'input-container'); // 预期: 提供的input元素无效。 (因为nonexistentInput是null)