Question

有没有办法遍历列表并在每个列表项中获取不同的内容？

我现在拥有的是：

ul.tabs
    li.tab-header-and-content
        a.tab-link(href="") Strategic overview
        .tab-content
            .col-4
                p Our world is changing fast. Global population is rising rapidly. There is growing pressure on resources. Rising energy prices and climate change have created a need for new lower carbon energy sources.
                p All of this is driving the transition towards a resource and energy efficient economy, and the chemical industry has a central role to play in enabling this shift.
                img(src="img/slide1.jpg", alt="")
            .col-4
                p Chemicals are the building blocks for our modern world. They are essential components in many of the products we use today and in the technologies that will drive us towards a more sustainable future.
                p At INEOS, sustainability is fundamental to how we do business. It is a key driver of innovation.
                p At the heart of the INEOS approach is our commitment to the principles of responsible care. These are central to the INEOS way of working and are put into practice every day across our business.
    li.tab-header-and-content
        a.tab-link(href="") Our approach
        .tab-content
            .col-4
                p Our approach to doing business drives efficiency, performance and sustainability across the Group. It helps us to stay reliable and competitive. It creates new opportunities to reduce energy and waste and encourages work in partnerships. Building positive relations with our local communities and making our company a great place to work also make good business sense; essential to ensuring the long-term success of our company.
                p Ultimately, sustainability is what we aim to achieve, by excelling at what we do and taking the greatest of care how we do it.
            .col-4
                .captioned-tile
                    a.link(href="") Interview with Jim Dawson
                    .image-holder
                        img(src="", alt="")
                    p Lorem ipsum dolor sit amet.

我尝试使用以下mixin更简单的方法，但我不知道如何处理内容块，因此它将在每个列表项中呈现不同的内容：

mixin是：

mixin list(title)
  li.tab-header-and-content
    a.tab-link(href="")= title
    .tab-content
      block

我正在调用mixin：

- var titles = ['Strategic Overview', 'Our approach']
each title in titles
  +list(title)
    p How do I put individual content in here?

结果如下：

<li class="tab-header-and-content"><a href="" class="tab-link">Strategic Overview</a>
  <div class="tab-content">
    <p>How do I put individual content in here?</p>
  </div>
</li>
<li class="tab-header-and-content"><a href="" class="tab-link">Our approach</a>
  <div class="tab-content">
    <p>How do I put individual content in here?</p>
  </div>
</li>

基本上，我需要传递一些特定的块。

Answer 1

不应使用基本数组，而应使用如下对象数组：

- var data = [
    {'title':'Strategic Overview', 'content':'Your content 1'},
    {'title':'Our approach', 'content':'Your content 2'}
]

each item in data
  +list(item.title)
    p= item.content

内容不同的玉石列表迭代

1 个答案: