Как я могу использовать для петли в JavaScript, чтобы добавить HTML

Я делаю немного галереи на своем веб-сайте, и это содержит много картин, как я могу использовать для петли, чтобы добавить литий на моем веб-сайте.

Это - мой HTML прямо сейчас и вместо весь тех

  • , я хотел бы за петля. HTML:
    <div id="pictureBlock">
        <div id="three-columns" class="grid-container">
            
        </div>
    </div>
    
  • 2
    вы получаете множество изображений и хотите показать их в литий s?
    добавлено автор 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
    добавлено

    Просто можно использовать для петли,

    <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 вы могли сделать что-то как в этой Скрипке, которую я просто создал:

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

        http://jsfiddle.net/wd09ccpa/

        В варе картины должны были бы быть некоторым списком картин, которые вы имеете.

        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 Jobs — чат
        JavaScript Jobs — чат
        8 336 участник(ов)

        JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

        JavaScript.ru
        JavaScript.ru
        7 932 участник(ов)

        Сообщество сайта JavaScript.ru в Slack.

        pro.js
        pro.js
        4 675 участник(ов)

        Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

        Верстка сайтов HTML/CSS/JS/PHP
        Верстка сайтов HTML/CSS/JS/PHP
        3 439 участник(ов)

        Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

        JavaScript — русскоговорящее сообщество
        JavaScript — русскоговорящее сообщество
        3 269 участник(ов)

        Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

        JavaScript Noobs — сообщество новичков
        JavaScript Noobs — сообщество новичков
        2 484 участник(ов)

        Чат для новичков

        Чат — Типичный Верстальщик
        Чат — Типичный Верстальщик
        1 080 участник(ов)

        Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

        javascript_ru
        javascript_ru
        915 участник(ов)

        Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

        jsChat
        jsChat
        603 участник(ов)

        Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

        JavaScript for Zombies Chat
        JavaScript for Zombies Chat
        492 участник(ов)

        Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

        All That JS
        All That JS
        417 участник(ов)

        JS на русском

        Веб-Технологи: UI/UX, Вёрстка, Фронтенд
        Веб-Технологи: UI/UX, Вёрстка, Фронтенд
        167 участник(ов)

        Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

        DTP :: @DTPublish
        DTP :: @DTPublish
        147 участник(ов)

        Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing