循環：每三次迭代添加一個html

Question

我有一個需要呈現html的模板。我正在使用EJS（基本上是使用javascript的HTML）。

我需要在每三次迭代之後插入一個新的行div和一個wrapper div，並在其中嵌入下三個迭代，然後在它開始後再開始3次迭代。我覺得在Ruby中很容易做到這一點，但我不知道JS。我怎麼能這樣做？

代碼示例：

<div class="row"> 
          <div class="wrapper"> 
           <div class="col-lg-4 col-xl-4 col-md-4"> 
            <div class="news-card"> 
             <img src="http://placehold.it/200x75" alt="It yo"/> 
             <h1>Loem ipsum mailto palo</h1> 
             <p> 
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
             <a style="margin-top:2rem;" href="#">Read More</a> 
            </div> 
           </div><div class="col-lg-4 col-xl-4 col-md-4"> 
            <div class="news-card"> 
             <img src="http://placehold.it/200x75" alt="It yo"/> 
             <h1>Loem ipsum mailto palo</h1> 
             <p> 
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
             <a style="margin-top:2rem;" href="#">Read More</a> 
            </div> 
           </div> 
           <div class="col-lg-4 col-xl-4 col-md-4"> 
            <div class="news-card"> 
             <img src="http://placehold.it/200x75" alt="It yo"/> 
             <h1>Loem ipsum mailto palo</h1> 
             <p> 
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
             <a style="margin-top:2rem;" href="#">Read More</a> 
            </div> 
           </div> 
          </div> 
          </div> 

      <div class="row"> 
       <div class="wrapper"> 
        <div class="col-lg-4 col-xl-4 col-md-4"> 
         <div class="news-card"> 
          <img src="http://placehold.it/200x75" alt="It yo"/> 
          <h1>Loem ipsum mailto palo</h1> 
          <p> 
           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
          <a style="margin-top:2rem;" href="#">Read More</a> 
         </div> 
        </div><div class="col-lg-4 col-xl-4 col-md-4"> 
         <div class="news-card"> 
          <img src="http://placehold.it/200x75" alt="It yo"/> 
          <h1>Loem ipsum mailto palo</h1> 
          <p> 
           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
          <a style="margin-top:2rem;" href="#">Read More</a> 
         </div> 
        </div> 
        <div class="col-lg-4 col-xl-4 col-md-4"> 
         <div class="news-card"> 
          <img src="http://placehold.it/200x75" alt="It yo"/> 
          <h1>Loem ipsum mailto palo</h1> 
          <p> 
           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
          <a style="margin-top:2rem;" href="#">Read More</a> 
         </div> 
        </div> 
       </div> 
       </div> 

或者

<% data.articles.forEach(function(article) {%> 
    **every three times $('.container').html(<div class="row">) *** 
     <div class="col-lg-4 col-xl-4 col-md-4"> 
         <div class="news-card"> 
          <img src="http://placehold.it/200x75" alt="It yo"/> 
          <h1>Loem ipsum mailto palo</h1> 
          <p> 
           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
          <a style="margin-top:2rem;" href="#">Read More</a> 
         </div> 
        </div>    
<% }); %> 

Answer 1

你可以考慮到對迭代器的，如果它被3整除。如果是，那麼你渲染製作條件，否則（ ...）。

如果（這3％== 0）{

render() 

}其他{

(...) 

}

希望它能幫助。