Want to add style to odd index and even index of Map in sightly

[Ronnie09]

I have Map<String, List<String>>

for even Iteration I want css class left to appear and for odd iteration I want css class as right how can I achieve that

<sly data-sly-list="${sampleModel.data.keySet.iterator}">
<div class=left>
     <li>${item}</li>    
     <ul data-sly-list.dataPrint="${sampleModel.data[item]}"> 
          <li>${dataPrint}</li>
     </ul>
</div><!-- for even iteration I need class=left, for odd iteration I need class right-->
</sly>

[manikanthar1295]

Hi,

You can use begin=0 step=2 end=itemList.count inside the list so that according to your need yo can place left or right.

[Amit-Tiwari · Accepted solution]

Hey,

you can use HTL list even and odd to complete your requirement.

check if odd or even return true place in left or right div according to your need.
You can refer all htl feature here: htl spec 

${dataPrint.odd} it will give true if your list is on odd place
${dataPrint.even} it will give true if your list is on even place

 here the thing you need to refer

An additional itemList (respectively <variable>List in case a custom identifier/variable was defined using data-sly-list.<variable>) identifier is also available within the scope, with the following members:

• index: zero-based counter (0..length-1);
• count: one-based counter (1..length);
• first: true for the first element being iterated;
• middle: true if element being iterated is neither the first nor the last;
• last: true for the last element being iterated;
• odd: true if count is odd;
• even: true if count is even.

[milind_bachani]

Hi @Ronnie09 ,

This is pretty much straight forward , you can use as :

<sly data-sly-list="${sampleModel.data.keySet.iterator}">
        <div data-sly-test="${itemList.odd}" class="left">
            <li>
                ${item}
            </li>
            <ul data-sly-list.dataPrint="${sampleModel.data[item]}">
                <li>
                    ${dataPrint}
                </li>
            </ul>
        </div>

        <div data-sly-test="${itemList.even}" class="right">
            <li>
                ${item}
            </li>
            <ul data-sly-list.dataPrint="${sampleModel.data[item]}">
                <li>
                    ${dataPrint}
                </li>
            </ul>
        </div >
</sly >

Thanks.