[jQuery] Assigning a List of Key-Value Pairs to a <DIV> Tag
QUESTION: Is it possible to use the for-in statement to list all of
the key:value pairs of an object in a <div> tag?
BACKGROUND: The following code (see SOURCE CODE below) writes only
the sentence: "Flower name and color: daffodil:yellow." The
key:value pairs rose:red and tulip:pink appear to be written over each
time the for-in statement iterates. If I replace the this.html( );
statement with a document.write( ); statement all three key:value
pairs are written, but the entire rest of the document is obliterated.
SOURCE CODE:
(function($) {
$.fn.writeColorOfFlower = function() {
var flowerColor = {rose: "red", tulip: "pink", daffodil: "yellow"};
for (flower in flowerColor) {
this.html("Flower name and color: " + [flower] + ":" + flowerColor
[flower] + ".<br />");
}
return;
}
})(jQuery);
$(document).ready(function() {
$('#flowers').writeColorOfFlower();
});