Data attribute returning undefined in loop

NFSBuff 0
Viewed 16

I cannot figure out why this returns undefined. Accessing the data-menu attribute elsewhere works just fine. Wondering if lack of sleep is is making me miss the obvious...

$(document).ready(function() {
  var tileEmptyCheck = Array.from(document.getElementsByClassName("tile-menu-container"));
  for (var i = 0; i < tileEmptyCheck.length; i++) {
    let temp = $(tileEmptyCheck[i]).data("emptyTile");
    console.log(temp);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="s1t01" class="tile-menu-container" data-menu="yesMenu" data-emptyTile="notEmpty">
  Content
</div>

jquery
1 Answers

The usage of data-*,

The data-* attribute consists of two parts:

  1. The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix "data-"
  2. The attribute value can be any string

So do not use like this data-emptyTile=. There if you change the name to lowercase like this data-emptytile= or data-empty-tile= it will work.

I hope this helps!

Veeramani R0
Related