どのように私はHTMLを追加するためにJavaScriptでforループを使用することができます

私は自分のウェブサイトに小さなギャラリーを作っています、そしてそれはたくさんの写真を含んでいます。

これは今のところ私のHTMLで、

  • の代わりに for ループを使用したいのです。 HTML:
    <div id="pictureBlock">
        <div id="three-columns" class="grid-container">
            
        </div>
    </div>
    
  • 2
    画像の配列を取得していて、それらを li に表示しますか
    追加された 著者 Bhushan Kawadkar,
    李の長さは固定ですか?それとも価値の量に依存しますか?
    追加された 著者 Nishit Maheta,
    JavaScriptを使ってこれらすべての画像を表示しますか。印刷したい画像がハードコードされているか、画像を表示するためのバックエンドが提供されています。
    追加された 著者 Codelord,

    8 答え

    jQueryを使う:

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

    単純にforループを使うことができます、

    <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
      追加された

      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 = '
    • ';
          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 = '
    • ';
          rigDiv.append(element);
      }
      
      1
      追加された

      最も簡単な方法は jQuery を使用することです。

      <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
        追加された

        jQueryを使って、私が作成したこのFiddleのように何かをすることができます。

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

        http://jsfiddle.net/wd09ccpa/

        varの写真であなたが持っている写真のいくつかのリストでなければならないでしょう。

        0
        追加された

        勝利のためのJquery:

        for(var i = 1; i <= count; i++) {
           $('ul.rig').append("
      • ");
        }
        
        0
        追加された

        <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
        追加された
        var count = 15;
        for(let i=1; i<=count; i++){
            $("ul").append('
      • ');
        }
        
        0
        追加された
        JavaScript - 日本のコミュニティ
        JavaScript - 日本のコミュニティ
        2 参加者の

        日本人コミュニティのjavascript