Handlebars, how to evaluate the @index

Question

Handlebars, how to evaluate the @index

5.3k Views Asked by T.W. Barton At 04 April 2025 at 01:49

I'm using Ghost as my website base which in turn uses handlebars. I purchased a template to expedite my roll out and am now trying to customize a few items.

So the home page is a masonry style layout of blog entries. The page is built with a {{#foreach posts}} loop.

What I want to do is evaluate the @index (I assume that it is available in the foreach just like the each loop) so, something like this.

{{#foreach posts}}
    if @index = 0
        DO SOMETHING
    elseif @index = 1
        DO SOMETHING
    .
    .
    so on
{{/foreach}}

Or better yet a select case would be best. The current lay out is 6 items per page and my goal is to set specific css groups on 0 & 3, 1 & 4, and 2 & 5.

Thank you, Ty

Original Q&A

There are 3 best solutions below

**T.W. Barton** · Answer 1

T.W. Barton On 03 September 2017 at 00:15

So, you cannot do comparisons in handlebars. I figured out how to do it through javascript.

**Reedyn** · Answer 2

It is possible with the {{#has}} helper combined with the data variables accessable within the {{#foreach}}-object.

When inside a {{#foreach}} block, you have access to a set of data variables about the current iteration. These are:

@index (number) - the 0-based index of the current iteration

@number (number) - the 1-based index of the current iteration

@key (string) - if iterating over an object, rather than an array, this > contains the object key

@first (boolean) - true if this is the first iteration of the collection

@last (boolean) - true if this is the last iteration of the collection

@odd (boolean) - true if the @index is odd

@even (boolean) - true if the @index is even

@rowStart (boolean) - true if columns is passed and this iteration signals a row start

@rowEnd (boolean) - true if columns is passed and this iteration signals a row end

Source: http://themes.ghost.org/docs/foreach

{{#has number="3"}}{{/has}} // A single number

{{#has number="3, 6, 9"}}{{/has}} // list of numbers

{{#has number="nth:3"}}{{/has}} // special syntax for nth item

{{!-- All of these work exactly the same for index --}}

Source: http://themes.ghost.org/docs/has

So if you want to access 1 & 3 you can do the following:

{{#foreach posts}}
    {{#has @index="1, 3"}}
        //DO SOMETHING
    {{/has}}
{{/foreach}}

If you're after odd/even then the @odd and @even data-variables are much simpler to use.

**shagamemnon** · Answer 3

A better (simpler) solution is just to use CSS (view on CodePen):

 <head>
    <style>
    .item {
        color: white
    }
    .item:nth-child(6n-2), p:first-child  {
        background: green;
    }
    .item:nth-child(6n-4), p:nth-child(6n-1)  {
        background: red;
    }
    .item:nth-child(6n-3), p:nth-child(6n)  {
        background: blue;
    }
    </style>
</head>

<body>
  <div class="items">
    <p class="item">Item 0</p>
    <p class="item">Item 1</p>
    <p class="item">Item 2</p>
    <p class="item">Item 3</p>
    <p class="item">Item 4</p>
    <p class="item">Item 5</p>
    </div>
</body>

Handlebars, how to evaluate the @index

There are 3 best solutions below

Related Questions in HANDLEBARS.JS

Related Questions in GHOST-BLOG

Trending Questions

Popular # Hahtags

Popular Questions