html – 使用Jade迭代获取键和索引

前端之家收集整理的这篇文章主要介绍了html – 使用Jade迭代获取键和索引前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如下所述: http://jade-lang.com/reference/,很容易得到索引或密钥.但是有没有办法得到两者?
这个:
ul
  each val,index in {"day": "Wed","link": "url","message": "three"}
    li#item-= index + ': ' + val

输出

<ul>
  <li id="item-">day: Wed</li>
  <li id="item-">link: url</li>
  <li id="item-">message: three</li>
</ul>

但我想要这样:

<ul>
  <li id="item-0">day: Wed</li>
  <li id="item-1">link: url</li>
  <li id="item-2">message: three</li>
</ul>

解决方法

我想你只需要遍历一个数组就可以得到一个索引,所以这个文件对于这个例子来说有点混乱.我会给你三个如何完成这个的选择.选择你自己的冒险!

选项1:保留原始输入并构建您自己的索引

ul
  -var index = 0
  each val,key in {day: "Wed",link: "url",message: "three"}
    li(id="item-#{index++}") #{key}: #{val}

选项2:将输入更改为数组数组

ul
  each val,index in [["day","Wed"],["link","url"],["message","three"]]
    li(id="item-#{index}") #{val[0]}: #{val[1]}

选项3:将输入更改为对象数组

ul
  each val,index in [{day: "Wed"},{link: "url"},{message: "three"}]
    li(id="item-#{index}") #{Object.keys(val)[0]}: #{val[Object.keys(val)[0]]}

第一个选择可能是你想要的,但其他可能有趣的阅读.

猜你在找的HTML相关文章