與img標籤多個div內每翡翠的HTML預處理器

Question

單獨div的，我的代碼有：

<div id="cubeSpinner"> 
    <div class="face one"> 
     <img src="/images/Windows%20Logo.jpg" class=""> 
    </div> 
    <div class="face two"> 
     <img src="/images/Turtle.jpg" class=""> 
    </div> 
    <div class="face three"> 
     <img src="/images/Rainbow%20Worm.jpg" class=""> 
    </div> 
    <div class="face four"> 
     <img src="/images/Birdman.jpg" class=""> 
    </div> 
</div> 

如何使用玉簡化呢？我知道我可以像這樣使用for循環爲多個div的同一類，但是它們內部的img標籤呢？在Jade中有沒有簡單的方法？在此先感謝

- for(var x = 1;x <= 3;x++) 
    .nameOfClass 

Answer 1

如果您傳遞對象數組像下面的玉模板

var images = [ 
    {"src": "example1.Jpg", "className":"one"}, 
    {"src": "exampl2.Jpg", "className":"two"}, 
    {"src": "exampl3.Jpg", "className":"three"}, 
    {"src": "exampl4.Jpg", "className":"four"} 
] 

在模板中，你可以這樣

div.cubeSpinner 
    each image in images 
     div.fade(class=image.className) 
      img(src=image.src)