Question

我在我的网站上创建了一个小图库，它包含大量图片，如何使用for循环在我的网站中添加li。

这是我的HTML，而不是所有<li>我想要一个for循环。 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>

Answer 1

使用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>');
}

Answer 2

我认为最简单的方法是使用jQuery：

＆＃13;

var numberOfImages = 15;
var $container = $("#pictureBlock ul");
for (var i=1; i<=numberOfImages; i++) {
  $container.append('<li><img src="images/'+i+'.jpg" /></li>');
}

＆＃13;

<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>

＆＃13;

Answer 3

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 - 如果您的图片文件名不合规且不在同一目录中

// 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);
}

Answer 4

只需使用for循环，

＆＃13;

for (var i = 1; i < 16; i++) {
  $('ul.rig').append('<li><img src="images/' + i + '.jpg" /></li>')
}

＆＃13;

<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>

＆＃13;

Answer 5

使用jQuery你可以做一些像我刚刚创建的小提琴：

var pictures = [ "1", "2" ];

$.each(pictures, function(value) {
    $(".rig").append("<li><img src='images/" + value + ".jpg' /></li>");
});

http://jsfiddle.net/wd09ccpa/

在var中，图片必须是你所拥有的一些图片列表。

Answer 6

获胜的Jquery：

for(var i = 1; i <= count; i++) {
   $('ul.rig').append("<li><img src='images/'+i+'.jpg'></li>");
}

Answer 7

<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>

Answer 8

var count = 15;
for(let i=1; i<=count; i++){
    $("ul").append('<li><img src="images/'+ i +'.jpg" /></li>');
}

如何在javascript中使用for循环来添加HTML

8 个答案: