本文详解 jQuery 中通过类选择器精准定位并获取 input 元素 value 的方法，重点纠正 .find('names') 缺失点号导致选择器失效的常见错误，并提供可运行示例与最佳实践。
本文详解 jquery 中通过类选择器精准定位并获取 input 元素 value 的方法，重点纠正 `.find('names')` 缺失点号导致选择器失效的常见错误，并提供可运行示例与最佳实践。
在 jQuery 中，若需在某个父容器（如 .post）内查找具有特定类名的表单元素（例如 <input class="names">），必须使用标准 CSS 类选择器语法：即以英文句点 . 开头。原始代码中 $(this).find('names').val() 实际是在查找标签名为 <names></names> 的元素（类似 <div>、<code><span></span>），而 HTML 中并不存在该标签，因此返回 undefined。
✅ 正确写法应为：
$(this).find('.names').val()
其中 .names 明确表示“查找 class 属性包含 names 的元素”。
此外，还需注意以下关键细节：
-
唯一性保障：每个
.post容器内应仅有一个.names元素（如示例中所示）。若存在多个，.val()仅返回第一个匹配元素的值；如需全部值，应使用.map().get()：const allNames = $(this).find('.names').map((i, el) => $(el).val()).get(); console.log(allNames); // ['John'] 或 ['Frank'] 隐藏域安全读取：
.names元素为type="hidden"，其value可被安全读取，无需额外判断显隐状态。
jQuery 1.12.4下载jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
事件委托健壮性：当前使用
$(document).on('click', '.post', ...)是推荐做法，确保动态添加的.post块也能响应点击。
完整修正版代码如下：
(function ($) {
$(document).on('click', '.post', function (e) {
const $post = $(this);
const textContent = $post.text().trim(); // 获取纯文本（含"Position 1"等）
const nameValue = $post.find('.names').val(); // ✅ 正确类选择器
console.log('容器文本:', textContent);
console.log('对应姓名:', nameValue || '(未找到 names 元素)');
});
})(jQuery);
? 小结：jQuery 选择器严格遵循 CSS 语法规则——类名前加 .，ID 前加 #，标签名直接写。一次疏忽（如漏掉 .）将导致选择器完全失效。建议在开发中配合浏览器开发者工具的 console.log($(...)) 检查返回的 jQuery 对象长度（.length），快速验证选择器是否命中目标元素。
