我正在使用这个主题 http://twbs.github.io/bootstrap/examples/justified-nav/

我想在 jade View 中实例化我的集合的文档并(稍后创建分页)，但我的问题是关于有一个 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 &raquo;</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 &raquo;</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 &raquo;</a></p>
        </div>
      </div>

假设我的集合中只有 12 个文档，我如何遍历我的集合来创建 4 <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

我知道如何路由、访问数据库、在 jade 引擎上显示...我做了简单的测试 一切顺利，但要进入下一个阶段，我会很感激一些解释或一个小例子。

我下定决心:

each product, i in products 
div 
  div 
    h1 = product.title 
    p = product.imgurl 
    p = product.description 
    p = prodcuct.url

最佳答案

我只是根据您提供的信息做了一个小的、快速的、粗略的例子，我希望它能帮助您完成最后几个步骤以熟悉 Jade 和 co。

首先是你的集合，只是一个小例子(只有 8 个例子):

{
  products: [{title: 'xyz', imgurl: 'http://www.example.com/img.jpeg',
              description: 'more text', 
              url: 'http://www.example.com/'},
             {title: 'abc', imgurl: 'http://www.example.com/anotherimg.jpeg',
              description: 'a lot more text', 
              url: 'http://www.example.com/another'},
             {title: 'fgh', imgurl: 'http://www.example.com/anotherimg.jpeg',
              description: 'a lot more text', 
              url: 'http://www.example.com/another'},
             {title: 'tgb', imgurl: 'http://www.example.com/anotherimg.jpeg',
              description: 'a lot more text', 
              url: 'http://www.example.com/another'},
             {title: 'qwe', imgurl: 'http://www.example.com/anotherimg.jpeg',
              description: 'a lot more text', 
              url: 'http://www.example.com/anotherz'},
             {title: 'asd', imgurl: 'http://www.example.com/anotherimg.jpeg',
              description: 'a lot more text', 
              url: 'http://www.example.com/anothery'},
             {title: 'hjk', imgurl: 'http://www.example.com/anotherimg.jpeg',
              description: 'a lot more text', 
              url: 'http://www.example.com/anotherx'}]
}

这是你通过的res.render在您的 Node 应用程序中。

接下来我们有您的 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">在两个循环之间(我在这里使用 for 循环，如果你以其他方式传递数据会更容易。我想说的是:这个例子是不故障安全的，例如，如果你不有 3 列的数据你会得到一个像 Cannot read property 'title' of undefined 这样的错误 - 所以在这里你必须设置异常(exception))，所以我们每 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://www.example.com/img.jpeg</p>
    <p>more text</p>
    <p>http://www.example.com/</p>
  </div>
  <div class="col-lg-4">
    <h1>abc</h1>
    <p>http://www.example.com/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://www.example.com/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://www.example.com/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://www.example.com/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://www.example.com/anotherimg.jpeg</p>
    <p>a lot more text</p>
    <p>http://www.example.com/anotherx</p>
  </div>
</div>

你看到 <p>链接标签在这里没有多大意义，但您可以轻松地将它们更改为 <a>标记，它始终是相同的程序。

重要的是，在您的 Jade 标记中，缩进是正确的，移动的所有内容都在开始标记和结束标记之间。
所以循环在 div 行中，数据在你的列中。

关于node.js - Jade 循环通过 db 构建 <div>，每个使用 bootstrap 有 3 个内容 block ？提供的例子，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21998925/