Need help understanding jquery syntax

Question

For this segment of code:

 for (var i = 0; i < numbers.length; i++) {
 var imageCrystal = $('<img>');
 imageCrystal.attr('data-num', numbers[i]);
 ....
 }

is, imageCrystal.attr('data-num', numbers[i]); making a data attribute for the image tag that was just created and giving it a class name called "data-num" and then assigning whatever the value is at number[i]?

• Mogzol: attr creates an attribute in the element. Attributes prefixed with data- are an HTML5 thing for storing data in the element. So if numbers[i] was 3, this would make an imageCrystal element that looks like <img data-num="3" />. Data attributes can also be accessed using the jQuery data function, so imageCrystal.data("num") should return 3.
• DavidG: Worth noting here that the last line can be written as imageCrystal.data('num', numbers[i]); also if you use the data() method.
• Mogzol: @DavidG haha, just added my edit right as you posted that.
• henhen: ahh I got it. Thank you for the clarification. I am new to jquery and it is totally different from c++ syntax. Is there a place where I can look up jquery attributes like 'data'? For example, I didnt even know the data() function could be set in the html tags directyl using the jquery atrribute.
• henhen: isnt that creating a new img element? Also, I have an click function after this where $('.crystalImage').on( 'click', function() { counter = counter + parseInt($(this).data('woohoo'))

Answer 1

Simply put

imageCrystal.attr('data-num', numbers[i]); is a setter

imageCrystal.attr('data-num'); is a getter

If var numbers = [100, 200, 300] and if the img tags are appended to the DOM, it would look something in these lines.

<img data-num="100" />
<img data-num="200" />
<img data-num="300" />

More info: http://api.jquery.com/attr/

• henhen: thank you for the clarification also. I am new to jquery and am still trying to understand the syntax of jquery.