Javascript to loop / increment html code with valu

问题:

I need to create a list of links in a static (.html) page automatically, is there a way of doing this using JavaScript. I tired a few scripts but couldn't work it out.

this is my html...

<a href="1.html"><img src="images/1.jpg" width="119" height="121" alt="" /></a>

and this is what i want the script to generate 55 times...

<a href="1.html"><img src="images/1.jpg" width="119" height="121" alt="" /></a>
<a href="2.html"><img src="images/2.jpg" width="119" height="121" alt="" /></a>
<a href="3.html"><img src="images/3.jpg" width="119" height="121" alt="" /></a>

... and so on, call me lazy but any help would be most appreciated :)

回答1:

This should do the trick:

<div id="links">
</div>

<script>
var strLinks = '';

for (var i = 1; i <= 55; i++) {
    strLinks += '<a href="'+ i +'.html"><img src="images/'+ i +'.jpg" width="119" height="121" alt="" /></a>';
}

document.getElementById("links").innerHTML = strLinks;
</script>

JS Fiddle example: http://jsfiddle.net/RWUdG/2/

EDIT: Oops, missed a quote. Fixed.

回答2:

This could also work.

<div id="imgs">
</div>

<script>
var i = 55; while (i--) {document.getElementById("imgs").innerHTML += '<a href='+ i +'.html"><img src="images/'+ i +'.jpg" width="119" height="121" alt="" /></a>';}
</script>

http://jsfiddle.net/T2c3G/

回答3:

If your anchor tags are contained inside a div, you can do this:

$(document).ready(function(){
var linksHtml = "";
for(var i = 1; i <= 55; i++){
    linksHtml += '<a href="'+(i)+'.html"><img src="images/'+(i)+'.jpg" width="119" height="121" alt="" /></a>';
}
$("#linksDiv").html(linksHtml);
});