如何在jQuery中根据元素属性显示HTML文本？

报错原因 #

在你写的.each()回调函数里，this指向的是原生DOM元素，而attr()是jQuery对象的专属方法，原生元素没有这个方法，所以触发了报错。

两种修复方案 #

方案1：将原生元素转为jQuery对象

把this用jQuery(this)包裹，就能调用jQuery的attr()方法：

$(document).ready(function() {
  jQuery('.custom-size .size .text').each(function() {
    // 把this转成jQuery对象再调用attr
    var option_label = jQuery(this).attr("option-label");
    jQuery(this).text(option_label);
  });
});

方案2：使用原生DOM方法获取属性

直接用原生元素的getAttribute()方法，不需要转换为jQuery对象：

$(document).ready(function() {
  jQuery('.custom-size .size .text').each(function() {
    // 原生DOM方法获取属性值
    var option_label = this.getAttribute("option-label");
    jQuery(this).text(option_label);
  });
});

额外提示 #

原代码里的$('document')写法不规范，应该改成$(document)（去掉引号），虽然这不是报错的直接原因，但建议修正以避免潜在问题。

修复后，每个.text元素的内容会被替换为自身option-label属性的值，最终显示为：NONE、44、46、48。

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