Lucene 循环遍历集合并根据显示的数量修改类

我当前在我的

\u config.yml

中有一个类似这样的

事件集：

future:true

collections:
  events:
    output: true
    permalink: /:collection/:name

我试图只显示未来的4个职位。但是，我想根据是否会显示0或1、2、3或4篇文章来更改其容器的类别

{% assign curDate = site.time | date: '%s' %}
{% for event in site.events %}
    {% assign postStartDate = event.date | date: '%s' %}
    {% if postStartDate >= curDate %}
         <div class="SOMETHING">{{event.title}}</div> 
    {% endif %}
{% endfor %}

{%assign curDate=site.time |日期：“%s”}
{site.events%中的事件的%s}
{%assign postStartDate=event.date |日期：“%s”}
{%if postStartDate>=curDate%}
{{event.title}
{%endif%}
{%endfor%}

因此，如果有1篇文章的
postStartDate>=curDate
，我想使用class
。full
，2篇文章：
。一半
，3篇文章：
。三分之一
，4篇文章：
。四分之一

现在有人知道我如何计算和确定这一点了吗？
我从您想要的类名（
.full
，
.一半
，等等）推断出您想要动态调整元素的大小？如果是这种情况，您可以使用

不过，为了直接回答您的特定问题，您可以使用Javascript计算元素的数量，然后应用一个类

比如：

HTML

<div id="parent">
    {% for event in site.events %}
        {% assign postStartDate = event.date | date: '%s' %}
        {% if postStartDate >= curDate %}
            <div class="SOMETHING">{{ event.title }}</div> 
        {% endif %}
    {% endfor %} 
</div>


{site.events%中的事件的%s}
{%assign postStartDate=event.date |日期：“%s”}
{%if postStartDate>=curDate%}
{{event.title}}
{%endif%}
{%endfor%}

Javascript

var numberOfPosts = document.getElementById("parent").childElementCount;

if (numberOfPosts == 1) {
    var className = "full";
)
else if (numberOfPosts == 2) {
    var className = "one-half";
)
// etc....

var children = document.getElementById("parent").children;

for (var i = 0; i < children.length; i++) {
    children[i].classList.add(className);
}

var numberOfPosts=document.getElementById（“父”）.childElementCount；
如果（numberOfPosts==1）{
var className=“full”；
)
否则如果（numberOfPosts==2）{
var className=“一半”；
)
//等等。。。。
var children=document.getElementById（“父”）.children；
对于（变量i=0；i

你也许可以写那种清洁剂，但你明白了。
试试这个

    {% assign curDate = site.time | date: '%s' %}
    {% assign post_count = site.events | size %}
    {% if post_count == 1 %}
    {% assign css_class = "full" %}
    {% elsif post_count == 2 %}
    {% assign css_class = "one-half" %}
    {% elsif post_count == 3 %}
    {% assign css_class = "one-third" %}
    {% else %}
    {% assign css_class = "one-quarter" %}
    {% endif %}

    {% for event in site.events %}
        {% assign postStartDate = event.date | date: '%s' %}
         {% if postStartDate > curDate %}
    <div class='{{css_class}}'>{{event.title}}</div> 
        {% endif %}
    {% endfor %}

{%assign curDate=site.time |日期：“%s”}
{%assign post_count=site.events | size%}
{如果post_计数=1%}
{%assign css_class=“full”%}
{%elsif post_count==2%}
{%assign css_class=“一半”%}
{%elsif post_count==3%}
{%assign css_class=“三分之一”%}
{%else%}
{%assign css_class=“四分之一”%}
{%endif%}
{site.events%中的事件的%s}
{%assign postStartDate=event.date |日期：“%s”}
{%如果postStartDate>curDate%}
{{event.title}
{%endif%}
{%endfor%}
对不起，我应该说得更清楚。我想实现lucene而不是javascript。