Search code examples
aemsightly

Wrapping markup in conditional elements in Slightly?

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>

Example of markup rendered

Solution

  • 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.