'Show elements in alternating style with Mustache

I'm developing a web app with Spring + Mustache and I'm having a bit of trouble with this bit of code:

{{#concerts}}
    <section class="page-section">
        <div id="a" class="...">
            [boring code...]
        </div>
    </section>
 {{/concerts}}

So basically I have a collection of items (concerts) and I want them to apper alternately aligned to the left and to the right. For that, I have two css classes: bg-faded p-5 d-flex ms-auto rounded and bg-faded p-5 d-flex me-auto rounded.

My first thought was to do something like this:

<script>
function align(index) {
    var v = document.getElementById("a");
    if (index % 2 === 1){
        v.className += "bg-faded p-5 d-flex me-auto rounded";
    } else{
        v.className += "bg-faded p-5 d-flex ms-auto rounded";
    }
}
</script>

and then call that function feeding it with {{-index}}, but that didn't work.

Any thoughs?

javascriptcssspringmustache


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions