在tmenu中对每个x项进行包装

Question

​

<div class="nav nav_main">
    <ul class="level-1">
        <li class="level-1 norm uid_2"><a class="level-1 norm" href="company/at-a-glance/"><span>Company</span></a>

            <div class="level-2-wrapper-outer">
                <div class="level-2-wrapper">
                    <div class="level-2-wrapper-inner">
                        <ul class="level-2">
                            <li class="level-2 norm"><a class="level-2 norm" href="company/at-a-glance/"><span>At a glance</span></a>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="company/culture-and-values/"><span>Culture and values</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="company/culture-and-values/#c24">History</a>
                                    </li>
                                    <li class="level-3 norm"><a class="level-3 norm" href="company/culture-and-values/#c25">Corporate culture</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="company/uhlmann-worldwide/"><span>Uhlmann worldwide</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="company/uhlmann-worldwide/#c231">Germany</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="company/uhlmann-group/"><span>Uhlmann Group</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="company/uhlmann-group/#c29">visiotec</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" target="_blank" href="company/lieferanten-portal/"><span>Lieferanten-Portal</span></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
        <li class="level-1 norm uid_3"><a class="level-1 norm" href="solutions/capsules-tablets/"><span>Solutions</span></a>

            <div class="level-2-wrapper-outer">
                <div class="level-2-wrapper">
                    <div class="level-2-wrapper-inner">
                        <ul class="level-2">
                            <li class="level-2 norm"><a class="level-2 norm" href="solutions/capsules-tablets/"><span>Capsules, tablets</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="solutions/capsules-tablets/#c40">Blister machines</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="solutions/vials-ampoules-syringes/"><span>Vials, ampoules, syringes</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="solutions/vials-ampoules-syringes/#c64">Blister machines</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="solutions/blister-bottles/"><span>Blister, bottles</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="solutions/blister-bottles/#c75">Cartoners</a>
                                    </li>
                                    <li class="level-3 norm"><a class="level-3 norm" href="solutions/blister-bottles/#c76">Stretch-banding machines</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="solutions/cartons-cases/"><span>Cartons, cases</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="solutions/cartons-cases/#c83">Stretch-banding machines</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="solutions/automation-and-software/"><span>Automation and software</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="solutions/automation-and-software/#c94">PDA &amp; SCADA</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="solutions/inspection-systems/"><span>Inspection systems</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="solutions/inspection-systems/#c98">BottleChrom</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
        <li class="level-1 norm uid_4"><a class="level-1 norm" href="products/blister-machines/"><span>Products</span></a>

            <div class="level-2-wrapper-outer">
                <div class="level-2-wrapper">
                    <div class="level-2-wrapper-inner">
                        <ul class="level-2">
                            <li class="level-2 norm"><a class="level-2 norm" href="products/blister-machines/"><span>Blister machines</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="products/blister-machines/#c109">Blister machine B 1240</a></li>
                                    </li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="products/cartoners/"><span>Cartoners</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="products/cartoners/#c123">Cartoner C 130</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="products/blister-lines/"><span>Blister lines</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="products/blister-lines/#c130">Blister line BEC 300</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="products/end-of-line-packaging-machines/"><span>End-of-line packaging machines</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="products/end-of-line-packaging-machines/#c133">Stretch-banding machines</a></li>
                                    </li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="products/bottle-lines/"><span>Bottle lines</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="products/bottle-lines/#c144">Bottle line IBC 120</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="products/feeders/"><span>Feeders</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="products/feeders/#c148">For solid dose products</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="products/competences/"><span>Competences</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="products/competences/#c158">Containment</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
        <li class="level-1 norm uid_5"><a class="level-1 norm"   href="services/advice/"><span>Services</span></a>

            <div class="level-2-wrapper-outer">
                <div class="level-2-wrapper">
                    <div class="level-2-wrapper-inner">
                        <ul class="level-2">
                            <li class="level-2 norm"><a class="level-2 norm" href="services/advice/"><span>Advice</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="services/advice/#c170">Quote and order management</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="services/support/"><span>Support</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="services/support/#c174">Telephone support</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="services/on-site-services/"><span>On-Site Services</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="services/on-site-services/#c177">Response time</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="services/spare-parts/"><span>Spare parts</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="services/spare-parts/#c180">Spare parts availability</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="services/format-parts/"><span>Format parts</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="services/format-parts/#c184">Format and tool sets</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="services/upgrades-and-rebuilds/"><span>Upgrades and rebuilds</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="services/upgrades-and-rebuilds/#c186">Electrical upgrades</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="services/automation-and-software/"><span>Automation and software</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="services/automation-and-software/#c191">PDA &amp; SCADA</a></li>
                                </ul>
                            </li>
                        </ul>
                        <ul class="level-2">
                            <li class="level-2 norm"><a class="level-2 norm" href="services/training/"><span>Training</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="services/training/#c194">Operator training</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="services/validation-and-calibration/"><span>Validation and calibration</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="services/validation-and-calibration/#c198">Validation of new machines</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

​

根据问题Menu: wrap every X item，如果我不知道菜单元素的确切数量，我如何包装每个x元素？

如果我使用the answer of chrisBerlin，问题是它只能处理3个元素。

但是对于每个父代的子代的动态计数，它会输出一个无效的代码。

我该如何解决这个问题呢？我的代码显示了HMENU的3个级别。我需要2级的x-wrap。我每行使用7个元素。

在我的页面上，第一个元素有5个子元素，所以<ul class="level-2">没有关闭。

tmp.nav_main = COA
tmp.nav_main{
    10 = COA
    10{
        10 = HMENU
        10{
            wrap = <ul class="level-1">|</ul>
            entryLevel = {$t3d_navigation.nav_main_entryLevel}
            excludeUidList = {$t3d_navigation.nav_main_excludeUidList}
            1 = TMENU
            1 {
                IProcFunc = user_tmenulinebreak->main
                expAll = 1
                NO{
                    wrapItemAndSub = <li class="level-1 norm uid_{field:uid}">|</li>
                    wrapItemAndSub.insertData = 1
                    ATagParams = class="level-1 norm"
                    stdWrap.wrap = <span>|</span>
                }
                CUR < .NO
                CUR.wrapItemAndSub = <li class="level-1 click uid_{field:uid}">|</li>
                CUR.wrapItemAndSub.insertData = 1
                CUR.ATagParams = class="level-1 click"
                CUR = 1
                ACT < .CUR
                ACT = 1
            }
            2 < .1
            2 {
                wrap = <div class="level-2-wrapper-outer"><div class="level-2-wrapper"><div class="level-2-wrapper-inner">|</div></div></div>
                expAll = 1
                NO{
                    wrapItemAndSub = |*|<ul class="level-2"><li class="level-2 norm">|</li> || <li class="level-2 norm">|</li> || <li class="level-2 norm">|</li> || <li class="level-2 norm">|</li> || <li class="level-2 norm">|</li> || <li class="level-2 norm">|</li> || <li class="level-2 norm">|</li></ul>|*|
                    ATagParams = class="level-2 norm"
                }
                CUR.wrapItemAndSub = |*|<ul class="level-2"><li class="level-2 click">|</li> || <li class="level-2 click">|</li> || <li class="level-2 click">|</li> || <li class="level-2 click">|</li> || <li class="level-2 click">|</li> || <li class="level-2 click">|</li> || <li class="level-2 click">|</li></ul>|*|
                CUR.ATagParams = class="level-2 click"
                ACT < .CUR
                ACT = 1
            }
            3 < .1
            3 {
                wrap = <ul class="level-3">|</ul>
                expAll = 1
                NO{
                    wrapItemAndSub = <li class="level-3 norm">|</li>
                    doNotShowLink = 1
                    after{
                        cObject = TEXT
                        cObject{
                            typolink{
                                parameter = {field:pid}#{field:uid}
                                parameter.insertData = 1
                                ATagParams = class="level-3 norm"
                            }
                            data = field:title
                        }
                    }
                }
                CUR{
                    wrapItemAndSub = <li class="level-3 click">|</li>
                    doNotShowLink = 1
                    after{
                        cObject = TEXT
                        cObject {
                            typolink{
                                parameter = {field:pid}#{field:uid}
                                parameter.insertData = 1
                                ATagParams = class="level-3 click"
                            }
                            data = field:title
                        }
                    }
                }
                ACT < .CUR
                ACT = 1
            }
        }
    }
}

在我的特殊情况下，我需要在一个<ul class="level-2"></ul>中有1-7个元素，如果有超过7个元素，新行必须从下一个8-14个元素开始。如果有超过14个新的行。

Answer 1

Read the docs它提供了很多线索，optionSplit的有效语法是：

 first-element(s) |*| middle-element(s) |*| last-element(s)

• 优先级为last、first、middle，这意味着如果您有一个项目，则只使用last段；如果有两个项目，则将使用
• ；如果您有3个或更多项目，则优先级将为order first, last <代码>H212<代码>H113

每个网段都可以有用||划分的编号的子网段。

您仅在中间部分使用了编号的子段，您需要修复它。

另一件事是optionSplit必须在所有情况下都有效，当只有1、2或3+项可用时，您使用它的方式会导致出现ul未关闭的情况。换句话说，您需要在上正确声明optionSplit的每个部分或子部分……

不管怎么说，，optionSplit是很好但很棘手的技术，它是在很多年前发明的，当没有任何可靠的JS库时，它可以通过一些因素添加样式操纵的可能性，目前我会使用jQuery和/或新的CSS特性来做这件事，只是生成普通的菜单，然后添加所需的类到每个-x元素。即：

• Like this using jQuery
• Like this using CSS