Javascript 多个div，每个div内分别带有一个img标记，带有Jade Html预处理器

我的守则如下：

<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>

如何用翡翠来简化它？我知道我可以在多个div的同一个类中使用像这样的for循环，但是它们内部的img标记呢？有没有一种方法可以在Jade中简单地实现这一点？提前谢谢

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

---

-for（var x=1；x如果您将下面这样的对象数组传递给您的jade模板

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) 

如果将如下所示的对象数组传递给jade模板

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)