HTML eklemek için javascript'te for döngüsünü nasıl kullanabilirim

Web sitemde küçük bir galeri yapıyorum ve çok sayıda resim içeriyor, web sitemde li eklemek için for döngüsünü nasıl kullanabilirim?

Bu benim şu andaki HTML'm ve tüm bunların yerine

  • döngüsü için bir istiyorum. HTML:

    <div id="pictureBlock">
        <div id="three-columns" class="grid-container">
            
        </div>
    </div>
    
  • 2
    görüntü dizisi alıp bunları li olarak görüntülemek mi istiyorsunuz?
    katma yazar Bhushan Kawadkar, kaynak
    li uzunluk sabittir? ya da bir miktar değere mi bağlı?
    katma yazar Nishit Maheta, kaynak
    JavaScript kullanarak tüm bu görüntüleri görüntülemek istiyor musunuz. Basmak istediğiniz görüntüler sabit kodlanmış veya görüntüleri görüntülemek için bir arka uç sağlanmıştır.
    katma yazar Codelord, kaynak

    8 cevap

    JQuery'yi kullanma:

    var ul = $('ul.rig');
    var count = 15;//number of images
    
    for(var i = 1; i <= count; i++) {
        ul.append('
  • ');
    }
    
    4
    katma

    Sadece bir döngü için kullanabilirsiniz

    <div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

    for (var i = 1; i < 16; i++) {
      $('ul.rig').append('
  • ')
    }
    <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">
        
        </div>
      </div>
      </div> </div>

      1
      katma

      01 - Resim dosya adınız numaraya göre sıralıysa ve aynı konumdaysa

      // 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 = '
    • ';
          rigDiv.append(element);
      }
      

      02 - Resim dosya adınız sıralı değilse ve aynı dizinde değilse

      // 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 = '
    • ';
          rigDiv.append(element);
      }
      
      1
      katma

      jQuery 'yi kullanmanın en kolay yol olduğuna inanıyorum:

      <div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

      var numberOfImages = 15;
      var $container = $("#pictureBlock ul");
      for (var i=1; i<=numberOfImages; i++) {
        $container.append('
    • ');
      }
      <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">
              
            </div>
        </div>
        </div> </div>

        1
        katma

        JQuery'yi kullanarak, yeni oluşturduğum bu Fiddle'da bir şeyler yapabilirsiniz:

        var pictures = [ "1", "2" ];
        
        $.each(pictures, function(value) {
            $(".rig").append("
      • ");
        });
        

        http://jsfiddle.net/wd09ccpa/

        Var resimlerde sahip olduğunuz fotoğrafların bir listesi olmalıydı.

        0
        katma

        Kazanmak için JQuery:

        for(var i = 1; i <= count; i++) {
           $('ul.rig').append("
      • ");
        }
        
        0
        katma

        <div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

        <div id="pictureBlock">
            <div id="three-columns" class="grid-container">
                
            </div>
        </div>
        
        <script>
            var gal = document.getElementById('gallery');
            
        
            for (var i = 1; i < 15 ; i++) {
                gal.innerHTML += "
      • ";
            };
        
        </script>
        </div> </div>

        0
        katma
        var count = 15;
        for(let i=1; i<=count; i++){
            $("ul").append('
      • ');
        }
        
        0
        katma