Wrapping markup in conditional elements in Slightly?

Question

If I needed to wrap every 5th item in a div, how can this be done in Slighlty? I thought this would work, but the closing tag for the div is never rendered. I can use a test in the opening div, but I can't have a test in the closing div.

<ul>
 <sly data-sly-test="${menuItemList.index == 0}"><div class="row-of-five"></sly>
  <li data-i="${menuItemList.index}">
   <a>${menuItem.linkText @ context = 'html'}</a>
  </li>
 <sly data-sly-test="${menuItemList.index == 5}"></div></sly>
</ul>

Answer 1

I believe this cannot be done in HTL directly because HTL always presumes valid nesting, which a single opening or closing <div>, as you have it in your sly data-sly-test elements, isn’t.

But you could create lists of five in your model and then render those with nested data-sly-repeat/data-sly-list instructions.

Though I hope this is pseudocode since your example would be invalid markup as <ul> tags are only allowed to have <li> children, not <div>s.

Answer 2

Wrap all your elements with div and use data-sly-unwrap to remove wrapping for all elements except every 5th element:

<div data-sly-unwrap="${...}">...</div>

If the expression inside ${} is evaluated to true, only inner content of div element will be rendered, but not div itself.