jQuery读取data-rows属性存入变量计算高度返回undefined如何解决

你的代码读取自定义属性返回undefined，核心是两个逻辑断点：

• 单独书写的$('.myclass')语句没有任何实际作用：这行代码只是执行了一次DOM选择，既没有把选中的元素存为变量，也没有给元素绑定任何回调，完全没有参与后续的取值流程
• $(document).ready回调函数内的this默认指向全局document对象，和你选中的.myclass div没有任何关联。你调用$(this).attr('data-rows')本质是在document节点上查找data-rows属性，自然找不到对应值，最终返回undefined

按照你“读取自定义属性、存入变量、计算元素新高度”的需求，调整后的完整逻辑如下：

var test;
$(document).ready(function() {
  // 选中目标div元素，生成对应的jQuery对象
  const $targetDiv = $('.myclass');
  // 从目标元素上读取data-rows属性，转为数值类型存入全局变量test
  test = Number($targetDiv.attr('data-rows'));
  alert(test);
  // 按需求计算新高度的参考示例：比如每行占用36px高度，总高度为行数*单行高度
  // const newHeight = test * 36;
  // $targetDiv.css('height', newHeight + 'px');
});

实用优化：读取data-*类自定义属性可以直接用jQuery内置的$.data()方法，不需要手动做类型转换。写法为test = $targetDiv.data('rows')，方法会自动把读到的数值转为Number类型，能避免后续高度计算时出现字符串隐式拼接的逻辑bug。

内容的提问来源于stack exchange，提问作者jona。