CODEWITHSUNDEEP
iterationpug
UsmanA
UsmanA

Reputation: 61

Add class to element within pug iteration

I require some help in adding a class to this PUG iteration, to any one li item element of choice. Not sure if I am approaching this incorrectly.

each val, index in ['one', 'two', 'three']
    li
        a(href='#')= val

Required Output

<ul>
    <li class="foo"><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
</ul>

Upvotes: 0

Views: 4088

Answers (1)

gandreadis
gandreadis

Reputation: 3242

You can do that with a ternary operator in the attribute list of your li element:

each val, index in ['one', 'two', 'three']
    li(class= (index === 0 ? "foo" : undefined))
        a(href='#')= val

If the problem situation permits, however, I'd suggest using CSS pseudo-classes (such as :first-child) to achieve this in a cleaner way :)

Upvotes: 3

Related Questions