Hoe kan ik een for-lus in javascript gebruiken om HTML toe te voegen?

Ik maak een kleine galerij op mijn website en deze bevat veel foto's, hoe kan ik een lus gebruiken om de li in mijn website toe te voegen.

Dit is mijn HTML nu en in plaats van al die

  • zou ik een lus for willen. HTML:
    <div id="pictureBlock">
        <div id="three-columns" class="grid-container">
            
        </div>
    </div>
    
  • 2
    krijgt u een array van afbeeldingen en wilt u ze weergeven in li s?
    toegevoegd de auteur Bhushan Kawadkar, de bron
    li lengte is vastgesteld? of het is afhankelijk van een bepaalde waarde?
    toegevoegd de auteur Nishit Maheta, de bron
    Wilt u al deze afbeeldingen weergeven met JavaScript? Afbeeldingen die u wilt afdrukken zijn hard gecodeerd of er is een back-end voorzien voor het weergeven van afbeeldingen.
    toegevoegd de auteur Codelord, de bron

    8 antwoord

    JQuery gebruiken:

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

    Je kunt gewoon een for-lus gebruiken,

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

      01 - Als de naam van uw afbeelding op nummer is gesorteerd en zich op dezelfde locatie bevindt

      // 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 - Als de naam van uw afbeeldingsbestand niet in de juiste volgorde staat en zich niet in dezelfde map bevindt

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

      Ik geloof dat de makkelijkste manier zou zijn om jQuery te gebruiken:

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

        Met jQuery zou je iets kunnen doen als in deze Fiddle die ik zojuist heb gemaakt:

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

        http://jsfiddle.net/wd09ccpa/

        In de var zouden foto's een lijst moeten zijn van de foto's die je hebt.

        0
        toegevoegd

        JQuery voor de overwinning:

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

        <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
        toegevoegd
        var count = 15;
        for(let i=1; i<=count; i++){
            $("ul").append('
      • ');
        }
        
        0
        toegevoegd