如何读取HTML组件的类值？基于data-value获取目标元素class

我看了你写的代码，问题出在已经定位到目标<a>元素，但没继续找到它里面的<i>标签，而且直接将jQuery对象转成JSON打印是看不到实际属性内容的。这里给你几个可行的解决办法：

方法一：精准定位后直接获取class #

你可以通过链式选择器，先找到对应data-value的<a>标签，再定位它内部的<i>元素，最后获取class属性值：

$(document).ready(function() {
  const targetValue = 'MON';
  // 组合选择器定位到目标<i>元素
  const targetIcon = $("#weekList li a[data-value='" + targetValue + "'] i");
  // 获取class属性
  const iconClass = targetIcon.attr('class');
  console.log(iconClass); // 会输出：hym monday
});

如果你的项目支持ES6语法，用模板字符串拼接选择器会更简洁：

$(document).ready(function() {
  const targetValue = 'MON';
  const targetIcon = $(`#weekList li a[data-value='${targetValue}'] i`);
  const iconClass = targetIcon.attr('class');
  console.log(iconClass);
});

方法二：遍历处理（适合多匹配场景） #

如果存在多个相同data-value的元素（虽然你的结构里应该是唯一的），可以用.each()遍历获取每个<i>的class：

$(document).ready(function() {
  const targetValue = 'MON';
  $("#weekList li a[data-value='" + targetValue + "'] i").each(function() {
    console.log($(this).attr('class'));
  });
});

补充说明 #

• 你可以用.attr('class')或者.prop('class')来获取class属性，两者在这个场景下效果一致
• 要确保DOM加载完成后再执行代码，$(document).ready()就是干这个的，你的这部分代码是没问题的

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