jQuery实战：隐藏无星号父元素

✅ 正确实现思路

1. 定位目标子元素：通过 ID 选取输入框（如 #guest_first_name, #guest_last_name）；
2. 向上获取父级 ：使用 .parent()；
3. 按文本内容过滤：利用 .not() 的回调函数参数 (i, element)，检查 element.innerHTML 是否*不包含 `` 字符**；
4. 执行隐藏：对不满足条件的元素调用 .hide()。

✅ 推荐代码（兼容性强、语义清晰）

$(document).ready(function() {
    // 选取所有目标输入框，并获取其直接父级 label 元素
    const $labels = $("#guest_first_name, #guest_last_name").parent("label");

    // 隐藏那些 innerHTML 中不包含 "*" 的 label
    $labels.not(function() {
        return $(this).html().includes("*");
    }).hide();
});

? 提示：使用 .html().includes("*") 比正则 /\\*/.test(...) 更直观易读；若需严格匹配独立星号（避免误判 *required 等），可升级为正则 /\*\s*(?=<\/font>|<\/label>|$)/i，但本例中简单包含判断已足够。

⚠️ 注意事项与最佳实践

• 避免过度依赖 font 标签： 已被 HTML5 废弃，建议改用 * 并通过 CSS 控制样式，后续也可用 $(this).find('.required').length > 0 判断，更健壮；
• .parent() vs .closest()：若父结构嵌套更深（如 ），应改用 .closest("label") 确保捕获最近的语义化父标签；
• 性能考虑：大量元素时，可先缓存 $(this).html() 结果，避免重复解析；
• CSS 替代方案（补充）：纯前端隐藏亦可通过添加类（如 .hidden { display: none; }）配合 CSS 控制，便于统一维护和动画扩展。

✅ 效果验证

运行上述代码后：

• 含 First name * 的 保持可见；
• 仅含 Last name 的 将被隐藏；
• DOM 结构不变，仅视觉上移除，符合无障碍与 SEO 友好原则。

掌握这种“基于子元素定位 + 父级内容过滤”的模式，可灵活应用于表单分组显示、条件字段折叠、动态步骤导航等真实业务场景。

本篇关于《jQuery实战：隐藏无星号父元素》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！