sorting - 如何使用 pug 从一个数组中将项目过滤到两个单独的列表中?
问题描述
我正在尝试创建一个 pug mixin,它可以根据生成的列表的长度处理不同的格式。我让它能够接受无限的值,并且可以生成一个列表没问题。
当我尝试按索引对项目进行排序以创建多个列表时,代码要么<ul>
为每个列表生成一个新列表,要么<li>
根本不为更长的列表格式生成一个新列表。
如果 items 数组的长度大于 5,我该如何做到这一点,它将前 5 个项目放在列表 1 中,其余的放在第二个列表中?
代码:
mixin panelList(...items)
if items.length < 6
ul.list-unstyled.col.col-12.col-lg-12.d-none.d-lg-inline
each item in items
li.list-item.my-lg-1= item
else
each item in items
.row.row-12
while index < 6
ul.list-unstyled.col.col-12.col-lg-6.offset-sm-4.offset-md-0.offset-lg-0.d-none.d-lg-inline
li.list-item.my-lg-1= item
while index > 5
ul.list-unstyled.col.col-12.col-lg-12.d-none.d-lg-inline
li.list-item.my-lg-1= item
mixin panelList(...items)
if items.length < 6
ul.list-unstyled.col.col-12.col-lg-12.d-none.d-lg-inline
each item in items
li.list-item.my-lg-1= item
else
each item in items
.row.row-12
while index < 6
ul.list-unstyled.col.col-12.col-lg-6.offset-sm-4.offset-md-0.offset-lg-0.d-none.d-lg-inline
li.list-item.my-lg-1= item
while index > 5
ul.list-unstyled.col.col-12.col-lg-12.d-none.d-lg-inline
li.list-item.my-lg-1= item
通过以下方式实现:
+panelList("this", "is", "working", "great")
工作正常
问题在于这样的列表:
+panelList("this", "is", "not", "working", "quite", "as", "intended", "yet")
我尝试过排序,%
但它会<ul>
为每个项目生成一个新的。我尝试过使用 item.index 和 index。我也尝试过使用for
andif
而不是while
在 index < 6 之前。
解决方案
推荐阅读
- javascript - 使用 setCustomValidity() 时遇到特定于 IE 的 html5 验证问题
- emacs - 在 Emacs 中使用 Coq 时,如何在 ProofGeneral 中自定义命令和战术的颜色?
- react-native - React Native - 在视图边框上渲染阴影而不是在内容上
- python - 为什么我的枚举类型代码返回“对象没有属性”?
- android - 使用 adb shell 从 android sdcard 获取文件的 shell 脚本
- sage - Sage 数学数值评估
- php - 自动更改空格和句点以强调
- r - 在 R 中从 rbcb 包安装和下载数据
- python - 打印曲线拟合功能
- javascript - 如何在javascript中将字符串数组转换为对象属性?