i have some simple jquery code which im using to create this page dynamically instead of manually. here is my code
loop
for ( var i = 0; i < links.length; i++ ) {
$("#programs").append(
$("li")
.html("div")
.html("a", {
href: links[i] + ".exe"
})
.html("img", {
src: icons[i]
})
.html("p")
.html(captions[i])
);
}
declarations of arrays
var links = ["pictureVeiwer","maze","firefoxPrank"];
var icons = ["firefox-icon.gif","maze.jpg","imageVeiwer.jpg"];
var captions = ["Cute Firfox prank","Cool maze","Program to veiw pictures... kinda useless in 2013"];
I assume my syntax is a bit off, I have used similar code before but not in a loop. What am I doing wrong and how should I do this?
fiddle .
$("li")
selects all the li
elements on the page, actually you don't create new elements, it should be:
$("<li/>");
or:
$("<li></li>");
Also you are chaining .html()
methods which overwrites previous contents, I would suggest creating elements separately, something like this:
for (var i = 0; i < links.length; i++) {
var $li = $("<li/>"),
$a = $("<a/>", { href: links[i] + ".exe", text: 'whatever' }),
$img = $('<img/>', { src: icons[i] });
$div = $('<div/>').append($a).append($img);
$li.append($div).appendTo('#programs');
// | |
// | ---- append the `li` element to #programs
// |
// ---- append to the `li` element
}
If you are generating many elements dynamically you can consider using a templating library like Handlebars , EJS or Mustache .
I think I got it working here. A little verbose, but also clearer:
for ( var i = 0; i < links.length; i++ ) {
// Each list item will contain a div
var $li = $("<li/>")
// Each div will have a link, and that link will have an image and a caption
var $div = $("<div/>");
// Give the link its image
var $a = $("<a/>", {
href: links[i] + ".exe"
});
var $img = $("<img/>", {
src: icons[i]
});
$a.append($img);
// Give the link its caption
$p = $("<p/>");
$p.html(captions[i]);
$a.append($p);
// Give the div its link
$div.append($a);
// Give the list item its div
$li.append($div);
// Add the list item to the list
$("#programs").append($li);
}
Fiddle (You will need to try it on your own site, where your images can be referenced.)
You could also use templating, like Underscore provides:
HTML:
<script type="text/template" id="list-template">
<li>
<div>
<a href="<%= href %>"><img src="<%= src %>"></a>
<p><%= caption %></p>
</div>
</li>
</script>
<ul id="programs"></ul>
<script src="http://underscorejs.org/underscore-min.js"></script>
JS:
var $programsList = $('#programs');
var listTemplateHtml = $('#list-template').html();
for ( var i = 0; i < 3; i += 1 ) {
var li = _.template(listTemplateHtml, {
href: links[i] + ".exe",
src: icons[i],
captions: captions[i]
});
$programsList.append(li);
}
This would be much easier and more maintainable, and probably yield better performance, too.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.