jQueryオブジェクト - 以下のコードではどうなりますか？

Question

jQueryのこのスニペットで起こっていることは誰でも私に説明できますか？私に

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

、それはtileDivのように見える2つのit-- <div/>の値とコンマの後に第2ビットでjQueryオブジェクトに設定されています。しかし、tileDiv.data(this)コールで何が起こっているかを100％確かめることはできません。明確化または推測のおかげで。

Answer 1

コードが二番目の引数で渡された特性を有する新規divを作成し、tileDivにjQueryオブジェクトを記憶している。

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

そしてborder-top CSSプロパティを追加：

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

最後の行については、.data関数を使用して、そのjQueryオブジェクトに関連付けられたデータを格納および取得することができます。要素のHTML5 data-属性から情報を取得するためにも使用できます。この場合、thisのメンバーはすべてtileDivのデータに格納されます。あなたが持っていた場合：

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

を次にtileDiv.data('someData')は99を返し、あなたがthis jsFiddleで見ることができるようtileDiv.data('otherData')は、87を返します。

jQuery .dataのマニュアルは.data jQuery APIを参照してください。

Answer 2

Dataは、DOMオブジェクトにメタデータを格納するJQueryコマンドです。http://api.jquery.com/data/データは好きなように指定できます。

tileDiv.data(key, object_with_data) 

とこのようにそれを取得する：あなたはこのようにデータを追加し、上記のデータを取得し、それを何もしないよう

var tileDiv.data(key); 

そうそう、それが見えます。

Answer 3

dataは、HTML属性用のHTML 5プレフィックスです。あなたの文脈でthisが「hello」のような基本的な文字列であることがわかっている場合、jQueryはdata-helloという名前の属性のHTML属性を取得しようとします。 しかし、あなたのオブジェクトにはそのような属性がないので、何も起こっていないことがわかります。

最初の行は、新しいdiv要素を作成します

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

Answer 4

を書くために、その同じ、div要素の内部テキストを設定し、その後、idとclass属性を設定します。

2番目の行は、上端のスタイルを設定します。

三行目は、私は推測していthisオブジェクトのすべてのプロパティに等しい新しいdiv要素にデータを添付し、それはまた、プレーンオブジェクトことができるがnew Somethingコンストラクタで作成したJavaScriptオブジェクトです。

したがって、this.answer = 42の場合、tileDiv.data("answer")の結果は、3行目が実行された後も42になります。

thisのすべてのプロパティをコピーするのに少し無駄だと思われますが、代わりにtileDiv.data("tileInfo", this)と言う方が良いかもしれませんが、もっとコードを見ることなく分かりにくいです。