本文详解如何在 jQuery 中安全、规范地读取自定义属性（如 data-option-label）并更新 HTML 元素文本，重点纠正 this.attr() 报错、选择器书写错误及非标准属性使用等常见问题。
本文详解如何在 jquery 中安全、规范地读取自定义属性（如 data-option-label）并更新 html 元素文本，重点纠正 `this.attr()` 报错、选择器书写错误及非标准属性使用等常见问题。
在 jQuery 开发中，常需根据元素的自定义属性动态填充或更新其文本内容。但初学者容易因混淆原生 DOM 对象与 jQuery 对象，导致如 attr is not a function 这类运行时错误。核心问题在于：this 指向的是原生 DOM 元素，不支持 jQuery 方法（如 .attr() 或 .data()），必须先用 $() 将其包装为 jQuery 对象。
此外，直接使用非标准 HTML 属性（如 option-label）虽可工作，但不符合 HTML5 规范，可能影响可访问性与验证通过率。*推荐始终使用 `data-前缀的自定义数据属性**，它被 W3C 明确标准化，且 jQuery 的.data()方法专为此设计——不仅能读取data-属性值，还支持自动类型转换（如"42"→42）、缓存机制及驼峰式键名映射（data-user-id→.data('userId')`）。
以下是修正后的完整实现：
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
$(document).ready(function() {
$('.custom-size .size .text').each(function() {
// ✅ 正确：$(this) 将 DOM 元素转为 jQuery 对象
// ✅ 推荐：使用 .data() 读取 data-* 属性（语义清晰、健壮性强）
var optionLabel = $(this).data('option-label');
$(this).text(optionLabel);
});
});
对应 HTML 结构（注意 data-option-label 替代 option-label）：
<div class="custom-size">
<div class="size">
<div class="text" data-option-label="NONE"></div>
<div class="text" data-option-label="44">NONE</div>
<div class="text" data-option-label="46">44</div>
<div class="text" data-option-label="48">46</div>
</div>
</div>
⚠️ 关键注意事项：
- ❌ 错误写法：$('document') —— 应为 $(document)（无引号），否则 jQuery 会将其当作标签选择器查找
元素； - ❌ 错误写法：this.attr(...) —— this 是原生元素，需用 $(this).attr(...) 或更优的 $(this).data(...)；
- ✅ 若必须读取非 data- 属性（如遗留代码中的 option-label），可改用 .attr('option-label')，但需确保属性名完全匹配且已存在于 DOM 中；
- ✅ .data() 优先从 data- 属性初始化，后续修改 .data(key, value) 不会同步更新 HTML 属性；若需双向同步，应显式调用 .attr('data-key', value)。
总结：遵循 HTML5 标准使用 data-* 属性 + jQuery .data() 方法，配合正确的对象封装（$(this)）和文档就绪写法（$(document).ready(...)），即可高效、可靠地实现动态文本注入，同时提升代码可维护性与兼容性。
