[英]How can i use a for loop in javascript to add HTML
I'm making a little gallery in my website and it contains lots of pictures, how can I use a for loop to add the li
in my website. 我在我的网站上创建了一个小图库,它包含很多图片,如何使用for循环在我的网站中添加li
。
This is my HTML right now and instead of all those <li>
I would like a for
loop. 这是我的HTML,而不是所有那些<li>
我想要一个for
循环。 HTML: HTML:
<div id="pictureBlock">
<div id="three-columns" class="grid-container">
<ul class="rig columns-3">
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
<li><img src="images/6.jpg" /></li>
<li><img src="images/7.jpg" /></li>
<li><img src="images/8.jpg" /></li>
<li><img src="images/9.jpg" /></li>
<li><img src="images/10.jpg" /></li>
<li><img src="images/11.jpg" /></li>
<li><img src="images/12.jpg" /></li>
<li><img src="images/13.jpg" /></li>
<li><img src="images/14.jpg" /></li>
<li><img src="images/15.jpg" /></li>
</ul>
</div>
</div>
Using jQuery: 使用jQuery:
var ul = $('ul.rig');
var count = 15; // number of images
for(var i = 1; i <= count; i++) {
ul.append('<li><img src="images/' + i + '.jpg"></li>');
}
I believe the easiest way would be using jQuery : 我相信最简单的方法是使用jQuery :
var numberOfImages = 15; var $container = $("#pictureBlock ul"); for (var i=1; i<=numberOfImages; i++) { $container.append('<li><img src="images/'+i+'.jpg" /></li>'); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="pictureBlock"> <div id="three-columns" class="grid-container"> <ul class="rig columns-3"></ul> </div> </div>
01 - If your image file name are ordered by number and are in same location 01 - 如果您的图像文件名按编号排序并且位于同一位置
// Define number of images
var numImages = 15;
// Get the div you want to add element to
var rigDiv = $(".rig");
// Loop through images and add them to target div
for (var i=1; i <= numImages; i++) {
var element = '<li><img src="images/' + i + '.jpg" /></li>';
rigDiv.append(element);
}
02 - If your image file name are not in order and are not in same directory 02 - 如果您的图像文件名不符合顺序且不在同一目录中
// Define images array
var images = [
'images/1.jpg',
'images/2.jpg',
....
'images/10.jpg'
];
// Get the div you want to add element to
var rigDiv = $(".rig");
// Loop through images and add them to target div
for(var image of images){
var element = '<li><img src="' + image + '" /></li>';
rigDiv.append(element);
}
Simply you can use a for loop, 只需你可以使用for循环,
for (var i = 1; i < 16; i++) { $('ul.rig').append('<li><img src="images/' + i + '.jpg" /></li>') }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="pictureBlock"> <div id="three-columns" class="grid-container"> <ul class="rig columns-3"> </ul> </div> </div>
Using jQuery you could do something like in this Fiddle i just created: 使用jQuery你可以做一些像我刚刚创建的小提琴:
var pictures = [ "1", "2" ];
$.each(pictures, function(value) {
$(".rig").append("<li><img src='images/" + value + ".jpg' /></li>");
});
http://jsfiddle.net/wd09ccpa/ http://jsfiddle.net/wd09ccpa/
In the var pictures would have to be some list of the pictures you have. 在var中,图片必须是您拥有的图片列表。
Jquery for the win: 获胜的Jquery:
for(var i = 1; i <= count; i++) {
$('ul.rig').append("<li><img src='images/'+i+'.jpg'></li>");
}
<div id="pictureBlock"> <div id="three-columns" class="grid-container"> <ul class="rig columns-3" id="gallery"> </ul> </div> </div> <script> var gal = document.getElementById('gallery'); for (var i = 1; i < 15 ; i++) { gal.innerHTML += "<li><img src='images/" + i + ".jpg' /></li>"; }; </script>
var count = 15;
for(let i=1; i<=count; i++){
$("ul").append('<li><img src="images/'+ i +'.jpg" /></li>');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.