ループ：3回の繰り返しごとにhtmlを追加

Question

私はHTMLをレンダリングする必要があるテンプレートを持っています。私はEJS（基本的にはHTMLとjavascriptを使用しています）を使用しています。

3回の繰り返しごとに新しい行divとラッパーdivを挿入し、その中に次の3回の繰り返しをネストしてから、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() 

}他{

(...) 

}

は、それが役立つ場合ホープ。