the code:
$.each(tools, function (i, tool) {
$("<img>", tool).appendTo($toolbar);
})
let's part it in blocks:
$.each(tools, function (i, tool) { });
- jQuery each
this is the same as:
for(i = 0; i < tools.length; i++) {
var tool = tools[i];
}
$("<img>", tool)
- jQuery element creator
this is the same as having:
$("<img data-id='' src='' alt='' title='' data-description=''>");
and fill up with each set of parameters, for example, the first tool
(the sun) would be:
$("<img data-id='1' src='http://cdn4.iconfinder.com/data/icons/iconsland-weather/PNG/48x48/Sunny.png' alt='sun' title='sun' data-description='sun in photo'>");
which is the same as:
$("<img>").attr({
"data-id": 1,
"alt": "sun",
"title": "sun",
"src": "http://cdn4.iconfinder.com/data/icons/iconsland-weather/PNG/48x48/Sunny.png",
"data-description": "sun in photo"
});
and the same as
$("<img>", {
"data-id": 1,
"alt": "sun",
"title": "sun",
"src": "http://cdn4.iconfinder.com/data/icons/iconsland-weather/PNG/48x48/Sunny.png",
"data-description": "sun in photo"
});
which is exactly what the $("<img>", tool)
is all about
appendTo($toolbar);
- jQuery appendTo
simply append the result for each object in the tools
array, into the $toolbar
which might be a simple <div>