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]?

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. — Mogzol
– Mogzol, Commented Oct 14, 2016 at 22:46
Worth noting here that the last line can be written as imageCrystal.data('num', numbers[i]); also if you use the data() method. — DavidG
– DavidG, Commented Oct 14, 2016 at 22:47
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
– henhen, Commented Oct 14, 2016 at 22:59
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')); — henhen
– henhen, Commented Oct 14, 2016 at 23:05

Sushanth -- · Accepted Answer · 2016-10-14 22:48:31Z

5

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/

edited Oct 14, 2016 at 22:48

answered Oct 14, 2016 at 22:44

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

henhen Over a year ago

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

Collectives™ on Stack Overflow

Need help understanding jquery syntax

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related