Jekyll: Alternate Class in For Loop

Question

I was wondering if there was a way to alternate between classes in a for loop.

At the moment, I'm repeating my <article> block, and adding a .clearfix div after the second <article>.

{% for post in site.posts %}
  {% capture thecycle %}{% cycle 'odd', 'even' %}{% endcapture %}
  {% if thecycle == 'odd' %}
    <article class="md-col-5">
      ...
    </article>
  {% else %}
    <article class="md-col-5 md-col-offset-2">
      ...
    </article>
    <div class="clearfix"></div>
  {% endif %}
{% endfor %}

Is there a better way to handle this, so I don't have to repeat code and so there's only one .clearfix div when this is outputted to HTML.

I'd prefer the output to look like this:

<article class="md-col-5"></article>

<article class="md-col-5 md-col-offset-2"></article>

<div class="clearfix"></div>

<article class="md-col-5"></article>

<article class="md-col-5 md-col-offset-2"></article>

Is this possible with Jekyll?

Any help is appreciated. Thanks in advance!

Answer 1

You don't need to actually check for even or odd, you could use the cycle-helper to actually assign the additional class if needed. Also, you can check that string and only add the clearfix if needed:

{% for post in site.posts %}
    {% capture thecycle %}{% cycle 'md-col-offset-2', '' %}{% endcapture %}

    <article class="md-col-5 {{ thecycle }}">
        ...
    </article>

    {% if thecycle == 'md-col-offset-2' %}
        <div class="clearfix"></div>
    {% endif %}
{% endfor %}