Question

I am trying to wrap every 3rd item in a menu generated with TypoScript.

This is my menu:

tt_content.menu.20.4 >
tt_content.menu.20.4 < tt_content.menu.20.1
tt_content.menu.20.4.stdWrap.outerWrap = <div class="my-menu">|</div>
tt_content.menu.20.4.1.wrap = <ul>|</ul>
tt_content.menu.20.4.1.NO {
    doNotLinkIt = 1
    stdWrap.htmlSpecialChars = 0
    stdWrap.cObject = COA
    stdWrap.cObject {
        # title
        10 = TEXT
        10 {
            field = title
            typolink.parameter.field = uid
            typolink.ATagParams = class="more"
        }

        # abstract
        20 = TEXT
        20 {
            field = abstract
            htmlSpecialChars = 1
            wrap = <span>|</span>
        }
    }
}

Via How can I apply a different wrap to every menu item? I know how to wrap every item different, is there a way to wrap three items together?
And when there are more than 3 % x = 0 items, e.g. 14, the last opening tag has to be closed with the last item.

Current output:

<ul class="csc-menu csc-menu-1">
    <li>
        <a href="index.php?id=1">Page 1</a>
    </li>
    <li>
        <a href="index.php?id=2">Page 2</a>
    </li>
    <li>
        <a href="index.php?id=3">Page 3</a>
    </li>
    <li>
        <a href="index.php?id=4">Page 4</a>
    </li>
    <li>
        <a href="index.php?id=5">Page 5</a>
    </li>
    <li>
        <a href="index.php?id=6">Page 6</a>
    </li>
    <li>
        <a href="index.php?id=7">Page 7</a>
    </li>
    <li>
        <a href="index.php?id=8">Page 8</a>
    </li>
    <li>
        <a href="index.php?id=9">Page 9</a>
    </li>
</ul>

Wanted output, something like this:

<div class="pack">
    <a href="index.php?id=1">Page 1</a>
    <a href="index.php?id=2">Page 2</a>
    <a href="index.php?id=3">Page 3</a>
</div>
<div class="pack">
    <a href="index.php?id=4">Page 4</a>
    <a href="index.php?id=5">Page 5</a>
    <a href="index.php?id=6">Page 6</a>
</div>
<div class="pack">
    <a href="index.php?id=7">Page 7</a>
    <a href="index.php?id=8">Page 8</a>
    <a href="index.php?id=9">Page 9</a>
</div>
<div class="pack">
    <a href="index.php?id=10">Page 10</a>
    <a href="index.php?id=11">Page 11</a>
</div>

Answer 1

The below typoscript may help you (It’s for page menu to group 3 page links together and you need to modify it according to your requirements.):

page.234 = COA
page.234{
wrap = <ul> |</ul>
10 = HMENU
10.1 = TMENU
10.special = directory
10.special.value = 1
10.1 {
wrap = <li><ul>|</ul></li>
begin = 1
maxItems = 3
NO {
   allWrap = <li> |</li>
}
}
20 < .10
20.1.begin = 6
30 < .10
30.1.begin = 9
# etc. etc.
}