如何使用 jQuery 正确获取具有特定类名的表单元素的值-php教程-PHP中文网

如何使用 jQuery 正确获取具有特定类名的表单元素的值

本文详解 jQuery 中通过类选择器精准定位并获取 input 元素 value 值的方法，重点纠正 .find('names') 缺失点号导致选择器失效的常见错误，并提供可运行示例与最佳实践。

本文详解 jquery 中通过类选择器精准定位并获取 input 元素 value 值的方法，重点纠正 `.find('names')` 缺失点号导致选择器失效的常见错误，并提供可运行示例与最佳实践。

在使用 jQuery 操作 DOM 时，选择器语法的细微差异会直接影响结果。如问题所示：开发者希望点击每个 .post 容器时，读取其内部带有 class="names" 的隐藏输入框的 value（如 'John' 或 'Frank'），但原代码中 $(this).find('names').val() 始终返回 undefined——原因在于 'names' 是一个类名（class），而非标签名（tag），必须加点号前缀 .names 才能被 jQuery 正确识别为类选择器。

✅ 正确写法如下：

(function ($) {
    $(document).on('click', '.post', function (e) {
        // 获取当前 .post 元素内的纯文本内容（含 "Position 1" 等）
        console.log($(this).text().trim());

        // ✅ 正确：使用 '.names' 选择 class="names" 的元素
        const nameValue = $(this).find('.names').val();
        console.log('Name:', nameValue); // 输出：John / Frank
    });
})(jQuery);

⚠️ 注意事项：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

类选择器必须以 . 开头（如 '.names'），否则 'names' 会被解释为 <names></names> 自定义标签（不存在），导致匹配失败；
若一个 .post 内含多个 .names 元素，.find('.names').val() 仅返回第一个匹配项的值；如需全部值，应使用 .map()：
```
const allNames = $(this).find('.names').map((i, el) => $(el).val()).get();
console.log('All names:', allNames);
```
推荐为关键业务字段添加唯一标识（如 data-post-id），避免依赖命名规律（如 postname_15），提升健壮性：
```
<input name="postname_15" type="hidden" class="names" value="John" data-post-id="15">
```