循环结构
本节主要介绍,如果通过循环控制,重复执行代码块。
主要包含以下内容:
for
用于重复执行指定代码块,使用示例:
输入:
<!-- 假设products中包含帽子、T恤两种商品 -->
{% for product in products %}
{{ product.name }}
{% endfor %}
输出:
帽子 T恤
for的参数
limit
限制循环遍历的数目。示例如下:
输入:
<!-- 假设 array 是 [1,2,3,4,5,6] --> {% for item in array limit:2 %} {{ item }} {% endfor %}
输出:
1 2
offset
从指定位置开始遍历。示例如下:
输入:
<!-- 假设 array 是 [1,2,3,4,5,6] --> {% for item in array offset:2 %} {{ item }} {% endfor %}
输出:
3 4 5 6
range
定义一组用于遍历的数值。示例如下: 输入:
{% assign num = 4 %} {% for i in (1..num) %} {{ i }} {% endfor %} <br/> {% for i in (3..5) %} {{ i }} {% endfor %}
输出:
1 2 3 4 3 4 5
reversed
倒叙遍历。示例如下:
输入:
<!-- 假设 array 是 [1,2,3,4,5,6] --> {% for item in array reversed %} {{ item }} {% endfor %}
输出:
6 5 4 3 2 1
for的变量 - forloop
在每一个循环中,通过forloop可以获取到当前循环的相关信息,该变量只能在for循环语句中调用。 forloop包含以下属性:
cycle
范围循环,通常在for
循环的代码块中使用。每次执行cycle
,会依次输出范围中的数据,示例如下:
输入:
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
输出:
one two three one
使用cycle
的场景包括:
- 在table标签中,实现奇偶行的样式区分
- 在循环中,针对第一项或最后一项,使用特殊样式
cycle的参数
cycle
接收循环组作为参数,作为同个文件中,不同cycle
的区分。如果没有注明循环组,那同个文件中的cycle
都会作用于同个循环组。 下面的示例,来演示循环组的作用:输入:
<ul> {% for item in situation.selected %} <li{% cycle ' style="clear:both;"', '', '', ' class="last"' %}> 示例 </li> {% endfor %} </ul> <ul> {% for item in situation.unselect.vendors %} <li{% cycle ' style="clear:both;"', '', '', ' class="last"' %}> 示例 </li> {% endfor %} </ul>
上面的示例代码执行时,假设:第一个
for
循环,有两个遍历对象;第二个for
循环有四个遍历对象。但是,第二个cycle
循环,会在第一个cycle
基础上继续,所以,会有以下输出:<ul> <li style="clear:both"></li> <li></li> </ul> <ul> <li></li> <li class="last"></li> <li style="clear:both"></li> <li></li> </ul>
为了避免不同代码块的
cycle
干扰,可以通过指定循环组:<li{% cycle 'group1': ' style="clear:both;"', '', '', ' class="last"' %}>
tablerow
输出HTML的<tr>
和<td>
标签,必须在HTML的<table>
标签中使用。示例如下:
输入:
<table>
{% tablerow product in products %}
{{ product.name }}
{% endtablerow %}
</table>
输出:
<table>
<tr class="row1">
<td class="col1">
T恤
</td>
<td class="col2">
外套
</td>
</tr>
</table>
tablerow的参数
cols
指定table中的列数,示例如下:
输入:
{% tablerow product in products cols:2 %} {{ product.title }} {% endtablerow %}
输出:
<table> <tr class="row1"> <td class="col1"> T恤 </td> <td class="col2"> 外套 </td> </tr> <tr class="row2"> <td class="col1"> 领带 </td> <td class="col2"> 衬衫 </td> </tr> </table>
limit
限定遍历次数,示例如下:
{% tablerow product in products cols:2 limit:3 %} {{ product.title }} {% endtablerow %}
offset
从指定位置开始遍历,示例如下:
{% tablerow product in products cols:2 offset:3 %} {{ product.title }} {% endtablerow %}
range
定义的一组数值用于遍历,示例如下:
{% assign num = 4 %} <table> {% tablerow i in (1..num) %} {{ i }} {% endtablerow %} </table>