Создайте divs разных цветов через петлю с jinja и js

Question

Я использую jinja и javascript в своем шаблоне, чтобы создать несколько строк из 100 ящиков, в которых некоторые из них имеют один цвет, а некоторые - другие, в зависимости от числа в строка данных. Например, если строка в моей таблице имеет следующее:

year men women 
1988 60 40 

, что строки на моей странице будет год, то 60 зеленых ящиков (# мужчин) и 40 желтых коробок (# мужчин). В настоящее время я делаю это с помощью цикла jinja, но он только выплевывает один ряд разных цветов.

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

Этот код производит все годы на странице, но только первый ряд разноцветных коробок. Я проверил, чтобы строка заголовка моих данных соответствовала тому, что у меня есть в теге скрипта выше. Я не уверен, правильно ли использую переменные jinja в своем скрипте. Любая помощь приветствуется!

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. Следите за ними.