CODEWITHSUNDEEP
jquery
larryq
larryq

Reputation: 16309

jQuery object-- what happens in the code below?

Could anyone explain to me what's likely happening in this snippet of jQuery below?

        var tileDiv = $('<div/>', { 'class': 'tile', 'text': this.name, 'id': this.tileId });
        tileDiv.css('border-top', '5px solid ' + this.scenes[sceneId].borderColor);
        tileDiv.data(this);

To me, it looks like tileDiv is set to a jQuery object with two values in it-- <div/> and the second bit after the comma. Not 100% sure what's happening with the tileDiv.data(this) call however. Thanks for the clarifications or best guesses.

Upvotes: 0

Views: 85

Answers (4)

Drew Gaynor
Drew Gaynor

Reputation: 8472

The code is creating a new div with the properties passed in the second argument, and storing the jQuery object in tileDiv:

var tileDiv = $('<div/>', { 'class': 'tile', 'text': this.name, 'id': this.tileId });

And then adding the border-top CSS property:

tileDiv.css('border-top', '5px solid ' + this.scenes[sceneId].borderColor);

As for the last line, the .data function allows you to store and retrieve data associated with that jQuery object. It can also be used to retrieve information from HTML5 data- attributes on the element. In this case, all members of this will be stored in tileDiv's data. If you had:

this.someData = 99;
this.otherData = 87;
tileDiv.data(this);

Then tileDiv.data('someData') will return 99 and tileDiv.data('otherData') will return 87, as you can see in this jsFiddle.

See the documentation for jQuery .data here: .data jQuery API.

Upvotes: 1

Dave Methvin
Dave Methvin

Reputation: 1468

The first line creates a new div, sets the id and class attributes, then sets the inner text of the div.

The second line sets the top border style.

The third line attaches data to the new div that equals all the properties of the this object, which I am guessing is a Javascript object created through a new Something constructor although it could also be a plain Object.

So if this.answer = 42, the result of tileDiv.data("answer") would also be 42 after the third line executed.

Seems a bit wasteful to copy all the properties of this, it might have been better to say tileDiv.data("tileInfo", this) instead but it's hard to tell without seeing more code.

Upvotes: 1

Simon Edstr&#246;m
Simon Edstr&#246;m

Reputation: 6619

data is a HTML 5 prefix for HTML attributes. If we know that this in your context is a basic string like "hello" jQuery tryies to get a attribute HTML attribute named data-hello. But as you can see your object don't have any attribute like that so nothing is happening.

Its equal to write

 $(titleDiv).attr("data-" + this)

Upvotes: 1

McGarnagle
McGarnagle

Reputation: 102753

Data is a JQuery command that stores metadata in a DOM object: http://api.jquery.com/data/ The data can be anything you like. You add data like this:

tileDiv.data(key, object_with_data)

and retrieve it like this:

var tileDiv.data(key);

So yeah, it looks like the above retrieves the data but doesn't do anything with it.

Upvotes: 1

Related Questions