循环中Data属性返回undefined问题排查

你的问题出在jQuery的.data()方法对data属性的命名转换规则上：

• jQuery的.data()方法会自动将驼峰式的参数转换为连字符分隔的小写属性名去匹配。比如你调用.data("emptyTile")，它实际会去查找data-empty-tile这个属性，而不是你HTML里写的data-emptyTile。
• 而data-menu能正常获取，是因为menu是单单词，不存在驼峰转换的差异，.data("menu")正好匹配data-menu。

两种解决办法： #

• 方法一（推荐，符合HTML规范）：修改HTML的属性名，将data-emptyTile改为data-empty-tile，保持data属性用连字符分隔的小写命名规范，原JS代码无需修改：

<div id="s1t01" class="tile-menu-container" data-menu="yesMenu" data-empty-tile="notEmpty">
  Content
</div>

• 方法二（不修改HTML）：放弃jQuery的.data()，改用原生DOM的getAttribute()方法直接获取属性值，避免命名转换问题：

$(document).ready(function() {
  var tileEmptyCheck = Array.from(document.getElementsByClassName("tile-menu-container"));
  for (var i = 0; i < tileEmptyCheck.length; i++) {
    let temp = tileEmptyCheck[i].getAttribute("data-emptyTile");
    console.log(temp);
  }
});

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