如何用jQuery/JavaScript检测元素内可见字符并筛选有效<th>元素

我想找个简便方法，用jQuery或JavaScript检测<div>或<td>这类元素内是否存在有效可见的用户输入内容。举个实际场景：

有个带表头和筛选行的表格，结构如下：

<thead>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        ....
    </tr>
    <tr>
        <th><input id="FirstNameFilter" /></th>
        <th>
            <select id="LastNameFilter">
                <option value="Smith">Smith</option>
                <option value="Doe">Doe</option>
                <option value="Nelson">Nelson</option>
            </select>
        </th>
        ....
    </tr>
</thead>

用户可以在输入框输入内容筛选名字，或通过下拉框选择筛选姓氏，触发JS函数过滤表格行。现在需要便捷获取所有用户已输入/选择内容的<th>元素。

试过.is(':empty')或普通可见性检测，显然没用。目前的思路是先判断<th>里是<input>还是<select>，再分别取.val()或者:selected的.val()来判断。想知道有没有统一方法，不用区分元素类型，直接检测元素（含子元素）里是否存在有效可见的输入内容？

需要筛选的<th>： #

• 包含非空<input>的<th>
• 包含选中非空值<option>的<select>的<th>

需要排除的<th>： #

• 空<th>
• 包含空值<input>的<th>
• 包含无选中项或选中值为空的<select>的<th>

解决方案 #

可以写一个通用的判断函数，遍历目标元素内的表单控件，统一检查它们的有效值：

jQuery版本

function hasValidContent($element) {
    // 查找元素内所有表单控件（input/select等）
    const $controls = $element.find('input, select');
    if ($controls.length === 0) {
        // 没有表单控件，检查元素本身的文本内容（去空格后是否非空）
        const text = $.trim($element.text());
        return text !== '';
    }
    // 遍历控件，只要有一个非空有效就返回true
    return $controls.toArray().some(control => {
        const value = $.trim(control.value);
        return value !== '';
    });
}

// 使用示例：获取所有符合条件的<th>
const $activeFilterThs = $('thead tr:last th').filter(function() {
    return hasValidContent($(this));
});

原生JavaScript版本

function hasValidContent(element) {
    const controls = element.querySelectorAll('input, select');
    if (controls.length === 0) {
        const text = element.textContent.trim();
        return text !== '';
    }
    return Array.from(controls).some(control => {
        const value = control.value.trim();
        return value !== '';
    });
}

// 使用示例：获取所有符合条件的<th>
const activeFilterThs = Array.from(document.querySelectorAll('thead tr:last th')).filter(th => {
    return hasValidContent(th);
});

这个函数的逻辑是：

1. 先检查目标元素内的表单控件（input/select）
2. 有控件的话，判断是否存在控件的value去空格后非空
3. 没有控件的话，检查元素自身的文本内容去空格后是否非空
   完全不用区分控件类型，统一判断有效值，符合需求。

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