Jade 迭代到 HTML 表格答案

【问题标题】：Jade iteration to HTML tableJade 迭代到 HTML 表格
【发布时间】：2017-12-27 13:34:34
【问题描述】：

如何将价格数组添加到 Jade 中的第二个“td”标签？我希望它是迭代。有可能吗？

- var item = ['Item1', 'Item2', 'Item3']
- var price = ['40', '90', '140']

table.pricetable
    thead
        tr
            th item
            th price
    tbody
        each a in item
            tr
                td #{a}
                td ???

谢谢，西蒙

【问题讨论】：

标签： html iteration pug

【解决方案1】：

假设它们直接相关：

- var item = ['Item1', 'Item2', 'Item3']
- var price = ['40', '90', '140']

table.pricetable
    thead
        tr
            th item
            th price
    tbody
        each a, index in item
            tr
                td #{a}
                td #{price[index]}

但是，更好的方法是使用对象数组，而不是两个单独的数组：

- var items = [{item: 'Item1', price: 40}, {item: 'Item2', price: 90}, {item: 'Item3', price: 140}]

table.pricetable
    thead
        tr
            th item
            th price
    tbody
        each a in item
            tr
                td #{a.item}
                td #{a.price}

【讨论】：

【解决方案2】：

是的，这是可能的，通过在循环中获取索引：

- var item = ['Item1', 'Item2', 'Item3']
- var price = ['40', '90', '140']

table.pricetable
    thead
        tr
            th item
            th price
    tbody
        each a, index in item
            tr
                td #{a}
                td #{price[index]}

这使您可以获取正在迭代的当前值的索引，并可用于访问另一个数组中的相同位置。

【讨论】：

你比我快2分钟哈哈