How to alternate different CSS classes or styles while looping through list items?
In web design, to enhance visual aesthetics and user experience, we often encounter situations where we need to alternate different CSS classes or styles for list items (such as article lists, product lists, navigation menus, etc.).For example, make the background color of odd and even rows different, or apply a unique layout style every few items.AnQiCMS (AnQiCMS) provides a variety of simple and efficient methods to meet this requirement with its flexible template engine.
AnQi CMS uses a syntax similar to Django template engine, when processing data in loops, we can easily use built-in loop variables and tags to control the style of list items.The essence lies in using the index of items during the loop process, to assign different CSS classes through conditional judgment or specific tags.
Core function:forLoop withforloop.Counter
In the Anqi CMS template, when we use{% for item in items %}When traversing the list data with such a structure, the template engine will automatically provide some special loop variables, among which the most commonly used and crucial for style alternation isforloop.Counter.
forloop.CounterIndicates the current loop number, it starts from1and increases. This means that the first item in the loop,forloop.CounterThe value is 1; the second item is 2, and so on. Utilizing this feature, we can implement various complex alternating style logic.
Method one: utilizecycleTag efficient alternating CSS class
cycleThe tag is one of the most direct and elegant ways to implement style alternation in Anqi CMS templates.It can output a predefined list of strings in order in each loop, and it will automatically loop back to the first one when the list is exhausted.This is very suitable for alternating row styles or cycling through multiple styles in a fixed pattern.
Implement alternating row styles:
Assuming we want the odd rows of the list item to useodd-rowClass, even rows to useeven-rowClass.
{# 假设 archives 是通过 {% archiveList archives ... %} 获取的文档列表 #}
<ul class="article-list">
{% for item in archives %}
<li class="{% cycle 'odd-row' 'even-row' %}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
<p>{{ item.Description }}</p>
</li>
{% endfor %}
</ul>
The corresponding CSS style can be defined as:
.odd-row {
background-color: #f9f9f9;
border-left: 3px solid #007bff;
}
.even-row {
background-color: #ffffff;
border-left: 3px solid #6c757d;
}
Implement a loop of multiple classes (N styles):
If we need to looply apply three or more different CSS classes,cycletags are also applicable.
<ul class="product-grid">
{% for item in products %}
<li class="product-item {% cycle 'style-one' 'style-two' 'style-three' %}">
<img src="{{ item.Thumb }}" alt="{{ item.Title }}">
<h3>{{ item.Title }}</h3>
<p>价格: {{ item.Price }}</p>
</li>
{% endfor %}
</ul>
the corresponding CSS styles:
.product-item.style-one {
background-color: #e0ffe0;
border: 1px solid #28a745;
}
.product-item.style-two {
background-color: #e0e0ff;
border: 1px solid #007bff;
}
.product-item.style-three {
background-color: #fffde0;
border: 1px solid #ffc107;
}
Method two: useforloop.Counterperform conditional judgment (odd/even styles)
AlthoughcycleLabels are cleaner, but sometimes we may need to make decisions based on clear conditions, especially when it's not just a simple alternation in cycles, but when a specific style is applied when a condition is met.The most common scenario is to judge odd or even.
<div class="category-items">
{% for item in categories %}
<div class="category-card {% if forloop.Counter % 2 == 1 %}is-odd{% else %}is-even{% endif %}">
<h4><a href="{{ item.Link }}">{{ item.Title }}</a></h4>
<p>{{ item.Description }}</p>
</div>
{% endfor %}
</div>
the corresponding CSS styles:
.category-card.is-odd {
background-color: #f0f8ff;
}
.category-card.is-even {
background-color: #f8f8f8;
}
Method three: based onforloop.Countergenerate incremental custom class names
In some designs, we may need to generate a unique class name for each item in the list, such asitem-1,item-2,item-3As. This is very useful when it is necessary to control items at specific positions with fine precision.
<ol class="ordered-list">
{% for item in navigation %}
<li class="list-item-{{ forloop.Counter }}">
<a href="{{ item.Link }}">{{ item.Title }}</a>
</li>
{% endfor %}
</ol>
the corresponding CSS styles:
.ordered-list li {
padding: 10px;
margin-bottom: 5px;
}
.ordered-list .list-item-1 {
font-weight: bold;
color: #dc3545;
}
.ordered-list .list-item-3 {
border-bottom: 1px dashed #cccccc;
}
/* 甚至可以结合伪类实现更多效果 */
.ordered-list .list-item-{{ forloop.Counter }}:hover {
background-color: #e9ecef;
}
Method four: Advanced conditional judgment, to implement more complex loops with diverse styles.
When the alternating logic is not just simple even or odd or a few fixed styles, but based on a specific number (for example, every third or fifth item has a special style),forloop.CounterThe conditional judgment ability can take effect.
<div class="gallery">
{% for image in gallery_images %}
<div class="gallery-item
{% if forloop.Counter == 1 %}first-item{% endif %}
{% if forloop.Counter % 4 == 0 %}last-in-row{% endif %}
{% if forloop.Counter > 5 and forloop.Counter < 10 %}highlighted{% endif %}">
<img src="{{ image.src }}" alt="{{ image.alt }}">
<p>{{ image.caption }}</p>
</div>
{% endfor %}
</div>
The corresponding CSS style can be defined as:
.gallery-item {
float: left;
width: 24%; /* 假设每行4个 */
margin-right: 1%;
margin-bottom: 15px;
box-sizing: border-box;
border: 1px solid #eee;
}
.gallery-item.first-item {
background-color: #ffeb3b;
border-color: #ff9800;
}
.gallery-item.last-in-row {
margin-right: 0; /* 清除每行最后一个的右边距 */
}
.gallery-item.highlighted {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
Practical tips and suggestions
- Semantic class name:Try to use descriptive style purposes instead of specific visual effects class names (such as
featured-itemAnd