Looping: Hinzufügen von HTML alle drei Iterationen

Question

Ich habe eine Vorlage, die ich in HTML rendern muss. Ich benutze EJS (im Grunde HTML mit Javascript).

Ich muss ein neues Zeilen-Div und ein Wrapper-Div nach jeweils drei Iterationen einfügen und die nächsten drei Iterationen innerhalb dieses verschachteln, und dann starten Sie das über 3 Iterationen, nachdem es begonnen hat. Ich habe das Gefühl, dass es eine Möglichkeit gibt, dies in Ruby leicht zu machen, aber ich habe keine Ahnung in JS. Wie könnte ich das tun?

Code-Beispiel:

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

Oder

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

Sie können wegen der Iterator nehmen die für und eine Bedingung machen, wenn seine durch 3 teilbar Wenn ja, Sie dann machen, sonst (...).

if (it% 3 == 0) {

render() 

} else {

(...) 

}

Hoffe, es hilft.