jinjaとjsのループを使って異なる色のdivを作成する

Question

私のテンプレートにjinjaとjavascriptを使用して、いくつかのボックスを1つの色にし、いくつかを別のものにするデータの行私のスプレッドシートの列がある場合たとえば、次のように私のページに行

year men women 
1988 60 40 

は、その後、60緑色のボックス（男性の＃）と40黄色の箱（男性の＃）年になります。私は現在、ジンジャーのループでこれをやっていますが、色の違う箱から1列だけ吐き出すだけです。

{% for row in years %} 

<script> 
    var htmlElements = ""; 
    var container = document.getElementById("boxes"); 
    for (var i = 0; i < {{ row.men }}; i++) { 
     htmlElements += '<div class="men"></div>'; 
    } 
    for (var i = 0; i < {{ row.women }}; i++) { 
     htmlElements += '<div class="women"></div>'; 
    } 
    container.innerHTML = htmlElements; 
</script> 

<div class="row box-row"> 
    <div class="two columns"> 
     <p id="{{ row.id }}" class="year-text">{{ row.year }}</p> 
    </div> 
    <div id="boxes" class="ten columns"></div> 
</div> 
<div class="row"> 
    <div class="six columns offset-by-five"> 
     <a href="#" class="scrollToTop">Jump To Top</a> 
    </div> 
</div> 

{% endfor %} 

このコードは、ページ上のすべての年を生成し、異なる色のボックスのみ最初行。私は自分のデータのヘッダー行が上記のスクリプトタグにあるものと一致することを確認しました。スクリプト内でジンジャ変数を正しく使用しているかどうかはわかりません。どんな助けもありがとう！

Answer 1

あなたは確かにジンジャーでそれを行うことができます。

{% for row in years %} 

    <div class="container"> 
    {% for male_boxes in row.men %} 
     <div class="men"></div> 
    {% endfor %} 
    {% for female_boxes in row.women %} 
     <div class="women"></div> 
    {% endfor %} 
    </div> 

    <div class="row box-row"> 
     <div class="two columns"> 
      <p id="{{ row.id }}" class="year-text">{{ row.year }}</p> 
     </div> 
     <div class="boxes" class="ten columns"></div> 
    </div> 
    <div class="row"> 
     <div class="six columns offset-by-five"> 
      <a href="#" class="scrollToTop">Jump To Top</a> 
     </div> 
    </div> 

{% endfor %} 

注：あなたは、私が思い付いた、それはあなたが投稿していないコードで動作させるために、このビットを微調整する必要がありますが、ここにあるかもしれ私はあなたの<div>id秒のいずれかを変更しましたclassをループ内に作成したため、idという複数の要素が作成され、HTMLでは機能しません。それらに注意してください。