Меню на jade, как сверстать?

Question

[Анастасия Дементьева]

- var categories = ["Мобильные телефоны","Планшеты","Навигаторы"]
- var categoricons = ['img/categories/icon1.png','img/categories/icon2.png','img/categories/icon3.png']
                 
  ul.categories
    each item in categories
    
    
      li.categories__item
        a(href="").categories__link
          span.categories__icon
            each item in categoricons                        
              img(src= "#{item}")
          span.categories__text= item
       .categories__count 85

Компилирует:

<ul class="categories">
  <li class="categories__item"><a href="" class="categories__link"><span class="categories__icon"><img src="img/categories/icon1.png"/><img src="img/categories/icon2.png"/><img src="img/categories/icon3.png"/></span><span class="categories__text">Мобильные телефоны</span></a></li>
  <div class="categories__count">85</div>
  <li class="categories__item"><a href="" class="categories__link"><span class="categories__icon"><img src="img/categories/icon1.png"/><img src="img/categories/icon2.png"/><img src="img/categories/icon3.png"/></span><span class="categories__text">Планшеты</span></a></li>
  <div class="categories__count">85</div>
  <li class="categories__item"><a href="" class="categories__link"><span class="categories__icon"><img src="img/categories/icon1.png"/><img src="img/categories/icon2.png"/><img src="img/categories/icon3.png"/></span><span class="categories__text">Навигаторы</span></a></li>
  <div class="categories__count">85</div>
</ul>

А нужно :

<ul class="categories">
  <li class="categories__item"><a href="" class="categories__link"><span class="categories__icon"><img src="img/categories/icon1.png"/></span><span class="categories__text">Мобильные телефоны</span></a></li>
  <div class="categories__count">85</div>
  <li class="categories__item"><a href="" class="categories__link"><span class="categories__icon"><img src="img/categories/icon2.png"/></span><span class="categories__text">Планшеты</span></a></li>
  <div class="categories__count">85</div>
  <li class="categories__item"><a href="" class="categories__link"><span class="categories__icon"><img src="img/categories/icon3.png"/></span><span class="categories__text">Навигаторы</span></a></li>
  <div class="categories__count">85</div>
</ul>

Помогите, кто знает, пожалуйста=)

Answer 1

[Константин Китманов]

Есть в документации:

each item, index in categories
    // ...
    img(src= "#{categoricons[index]}")

Вложенный цикл не нужен.

Comments

[Анастасия Дементьева]

у img src = undefined (

[Константин Китманов]

Анастасия Дементьева: ну опечатка у вас где-то: codepen.io/hogart/pen/YWyMwW

[Анастасия Дементьева]

Константин Китманов: спасибо!