如何修改for循环以Bootstrap Col-md-6网格样式显示动态div？

Question

我现在将所有JSON数据附加到包装器中，但是输出显示10个带有10行的部分，而不是嵌套在一个section标记内并分成5行的所有div。 检查页面时可以看到动态创建的元素，但是JSON数据不会显示。 我觉得这很容易解决，而我却缺少明显的东西。

 //Button on click function taken out for now //$(".btn").click(function(){ //$('.flip').find(".card").toggleClass("flipped"); //return false; //}); //Api on load displays ten articles window.onload = function() { API_Call.displayTenArticles(); }; //Call to Api var API_Call = { generateRandomSource: function(){ // Array to store all external news sources from news API var allSources = ["abc-news-au", "al-jazeera-english","bbc-news", "bloomberg", "cnbc", "cnn", "google-news", "breitbart-news", "daily-mail", "reuters", "the-guardian-uk", "the-new-york-times", "the-wall-street-journal", "time", "the-washington-post"]; // Var to store randomly generated number based off of length of allSources API var randomSource = Math.floor(Math.random() * allSources.length); // Selected newsource generated on onload var selectedSource = allSources[randomSource]; // Function to select random news source // Function to generate 10 images to DOM return selectedSource; }, //Function that displays 10 articles displayTenArticles: function(){ selectedSource = API_Call.generateRandomSource(); // API_Call.NYT_API_Call(selectedSource); API_Call.NEWS_API_Call(selectedSource); }, parse_Ajax_JSON: function(response){ let sectTemplate = `<section> <div class="container"> <div class="row></div> </div>`; let colTemplate = `<div class="col-md-6> <p><a class="post-link"></a></p> <div class="post-img-wrap"> <img class="post-image"> </div> <p class="post-description"></p> </div>`; var results = response.articles; for (var i = 0; i < results.length; i = i + 2) { let $sect = $(sectTemplate), $row = $sect.find('.row'); $row.append(createPost(results[i])); // in case odd number entries, check if next item exists then append if (results[i + 1]) { $row.append(createPost(results[i + 1])); } // add whole section to dom $('#wrapper').append($sect); } function createPost(obj) { let $col = $(colTemplate); $col.find('.post-link').attr('href', obj.title).text(obj.title); $col.find('.post-image').attr('src', obj.urlToImage); //similar for description return $col; } function createPost(obj) { var $col = $(colTemplate); $col.find('.post-link').attr('href', obj.link).text(obj.title); $col.find('.post-image').attr('src', obj.urlToImage); $col.find('.post-description').attr('src', obj.urlToImage); //similar for description return $col; $('#wrapper').append('.post-image'); } }, //Api call to get data NEWS_API_Call: function(){ var article = $(this).attr("data-name"); var queryURL = "https://newsapi.org/v1/articles?source=" + selectedSource + "&sortBy=top&apiKey=01aed6729dc84b87b67d8eca2e2a711b" // ajax call to news API $.ajax({ url:queryURL, method: 'GET', }).done(function(response) { console.log(response); API_Call.parse_Ajax_JSON(response); }); }, }; 

 /* #558C89 Dark Green #74AFAD Light Green #D9853B Orange #ECECEA Light grey /*News Paper Font*/ @font-face{ font-family: 'aflfont'; src: url('aflfont.ttf'); } /*-----Basic Setup-------*/ *{ padding:0; margin:0; } body#body1{ width: 100%; padding: 0; margin: 0; background: #ECECEA ; height: auto; } h1{ padding-top:30px; margin:0; } h1.subscribeText{ font-size: 60px; font-family: 'aflfont',sans-serif; font-weight: 700; color: #D9853B; margin:0; padding: 10px; } p.pSubscribe{ font-size: 18px; font-family: 'aflfont', sans-serif; font-weight: 400; text-align: center; color: #fff; } hr{ width: 30%; } .articleHeader{ margin: 20px 0 20px 0; } section{ margin-top: 10px; margin-bottom: 100px; } p{ margin:0; } a{ color: #000; padding: 20px; margin-top: 5px; font-size: 40px; font-family: 'aflfont',sans-serif; font-weight: 700; text-align: center; text-decoration: none; } a:hover{ color:#3544af; text-decoration: none; } /* Styling of Container an Wrapper that holds the Articles */ .container{ z-index: 10; padding: 0; } #wrapper{ display: block; width: 100%; height: auto; text-align: center; } .row{ text-align: center; display: inline-block; } /*---- Header, Hero-Image, Logo, text, and Buttons NewsLetter Form--*/ header{ background:#3544af; } #logo{ margin: 0; } .hero-image{ width: 100%; height: 800px; background: #74AFAD; -webkit-box-shadow: 0 7px 4px rgba(0,0,0,.8); -moz-box-shadow: 0 7px 4px rgba(0,0,0,.8); box-shadow: 0 7px 4px rgba(0,0,0,.8); } .hero-text{ padding:50px 30px 0 30px; } p.headerText{ color: #fff; font-size: 25px; font-family: 'aflfont', sans-serif; font-weight: 400; text-align: center; display: block; margin-right: 30px; margin-left: 30px; padding-top: 30px; } .buttons{ padding:40px 0 40px 0; } .btn1{ width: 200px; border-radius: 20px; border: 1px solid #fff; box-shadow: 2px 5px rgba(0,0,0,.7); font-size: 20px; font-family: 'aflfont'; background: #D9853B; color: #fff; font-size: 20px; padding: 5px; } .btn2{ width: 200px; border-radius: 20px; border: 1px solid #fff ; box-shadow: 2px 5px rgba(0,0,0,.7); font-size: 20px; font-family: 'aflfont'; background: #558C89 ; color: #fff; padding: 5px; } .btn1:hover{ color:#fff; transition: .5s ease-in; background-color: #558C89; } .btn2:hover{ color:#fff; transition: .5s ease-in; background-color: #D9853B; } a.btn-primary:active{ color: #3544af; border: 2px solid #fff; transition: .5s ease-in; background-color: #fff; box-shadow: 4px 6px rgba(0,0,0,.8); } /* Span to seperate buttons */ span{ padding-right: 30px; padding-left: 30px; margin-top: 10px; } /* Article Nav Links and Buttons */ a{ color: #000; font-size: 40px; font-family: 'aflfont',sans-serif; font-weight: 700; text-align: center; text-decoration: none; } a:hover{ color:#3544af; text-decoration: none; } section.subscribe{ margin-top:60px; width: 100%; background: #558C89; height: 200px; border-radius: 10px; -webkit-box-shadow: 0 7px 4px rgba(0,0,0,.5); -moz-box-shadow: 0 7px 4px rgba(0,0,0,.5); box-shadow: 0 7px 4px rgba(0,0,0,.5); } input{ width: 300px; border: 2px solid #fff; border-radius: 5px; padding-right: 5px; height: 40px; background:#ECECEA; } .subscribe-form{ padding-top: 10px; } button.subscribe-submit{ color: #fff; border: 2px solid #d0d0d0; box-shadow: 4px 6px rgba(0,0,0,.5); transition: .5s ease-in; background-color: #D9853B; border-radius: 5px; height: 40px; font-size: 20px; padding:5px; } button.subscribe-submit:hover{ color: #D9853B; transition: .5s ease-in; background-color: #fff; } /*-----Article Div Styling ---*/ /*Div that holds Article*/ #articleImage{ text-align: center; background:#fff; -webkit-box-shadow: 0 7px 4px rgba(0,0,0,.8); -moz-box-shadow: 0 7px 4px rgba(0,0,0,.8); box-shadow: 0 7px 4px rgba(0,0,0,.8); width: 100%; height: 500px; padding-top: 20px; } /* Size of Dynamic loaded img*/ .imageSize{ height: 450px; max-height: 450px; } /*Dynamic Description*/ p.description{ text-align: left; font-size: 25px; color: #000; line-height: 190%; font-weight: 400; padding:5px; font-family: 'aflfont', sans-serif; } /* Div for Dynmaic Title*/ #title{ text-decoration: none; background: #fff; height: 110px; text-align: center; border:2px solid #3544af; padding: 0 20px 20px 20px; } /*----------Media Queries-----------*/ @media screen and (max-width: 790px){ #logo{ width: 400px; } /* Size of Dynamic loaded img*/ .imageSize{ height: 450px; max-height: 450px; } /*Dynamic Description*/ p.description{ text-align: left; font-size: 25px; color: #000; line-height: 190%; font-weight: 400; padding:5px; font-family: 'aflfont', sans-serif; } /* Div for Dynmaic Title*/ #title{ text-decoration: none; background: #fff; height: 100px; text-align: center; box-shadow: 2px 4px rgba(0,0,0,.5); border-left:2px solid #3544af; border-right:2px solid #3544af; margin:0; padding: 0 20px 20px 20px; } } 

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>SorceLess Home</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="./assets/css/style.css"> <link href="./assets/css/animate.css" type="text/css" rel="stylesheet"/> <link rel="stylesheet" type="text/css" href="./assets/css/waypoints.css"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> </head> <body id="body1"> <header class="text-center"> <div class="hero-image"> <div class="hero-text"> <h1><img class="os-animation" data-os-animation = "bounceInDown" data-os-animation-delay = ".1s" id="logo" src="./assets/img/sourceLesslogo.png"></h1> <p class="headerText os-animation" data-os-animation = "fadeInRight" data-os-animation-delay = ".2s">Moving beyond the biased opions <br>Opening up the mind to different views!</p> <section class="subscribe"> <div class="subscribe-box os-animation" data-os-animation = "fadeInRight" data-os-animation-delay = ".2s"> <h1 class="subscribeText">Subscribe</h1> <p class="pSubscribe">Subscribe to our newsletter to get the latest articles right to your inbox.<p> </div> <form action="index.html" method="post" class="subscribe-form os-animation" data-os-animation = "fadeInRight" data-os-animation-delay = ".2s"> <input type="email" name="email" class="subscribe-input" placeholder="Email address" autofocus> <button type="submit" class="subscribe-submit">Subscribe</button> </form> <div class="arrow bounce"></div> </section> </div> </div> </header> <div class="container text-center"> <div class="row buttons"> <div class="col-md-12"> <div class="os-animation" data-os-animation = "fadeInLeft" data-os-animation-delay = ".0s"> <button class="btn1 btn-primary ">Articles</button><span><button class="btn2 btn-primary">Blogs</button></span> </div> </div> </div> <div id="wrapper" class="text-center os-animation" data-os-animation = "bounceInUp" data-os-animation-delay = ".0s"> </div><!--Wrapper, holds dynamic divs --> </div><!--container --> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script><!-- jQuery --> <script type="text/javascript" src=./assets/js/jquery.waypoints.min.js></script><!-- jQuery Animation--> <script type="text/javascript" src=./assets/js/waypoints.js></script><!-- js animation --> <script type="text/javascript" src="./assets/js/app.js"></script><!-- Article Api --> </body> </html> 

Answer 1

每个迭代将for()循环增加2。 为每次迭代添加一个部分和一行，并将多个帖子添加到该行

 let sectTemplate =
   `<section>
    <div class="container">
     <div class="row></div>
 </div>`;

 let colTemplate =
   `<div class="col-md-6>
     <p><a class="post-link"></a></p>
        <div class="post-img-wrap">
            <img class="post-image">
        </div>
     <p class="post-description"></p>    
 </div>`;



 for (var i = 0; i < results.length; i = i + 2) {
   let $sect = $(sectTemplate),
     $row = $sect.find('.row');

   $row.append(createPost(results[i]));
   // in case odd number entries, check if next item exists then append
   if (results[i + 1]) {
     $row.append(createPost(results[i + 1]));
   }
   // add whole section to dom
   $('#wrapper').append($sect);

 }

 function createPost(obj) {
   let $col = $(colTemplate);
   $col.find('.post-link').attr('href', obj.link).text(obj.title);
   $col.find('.post-image').attr('src', obj.urlToImage);
   //similar for description
   return $col;
 }