jquery - jqueryを使用したサブレベルのulクラスの改善?

Question

できれば無制限のサブレベルで以下を書くより良い方法はありますか...?

$('#menu-primary-navigation li > ul.sub-menu').addClass('lvl-1');
$('#menu-primary-navigation li li > ul.sub-menu').removeClass('lvl-1').addClass('lvl-2');
$('#menu-primary-navigation li li li > ul.sub-menu').removeClass('lvl-2').addClass('lvl-3');
$('#menu-primary-navigation li li li li > ul.sub-menu').removeClass('lvl-3').addClass('lvl-4');

メニュー全体が動的に作成されるため、各レベルに手動でクラスを追加できないことに注意してください。

これは開始コードの例です。

        <ul id="menu-primary-navigation" class="menu">

           <li><a href="#">Top Level</a></li>
           <li><a href="#">Top Level</a>
                <ul class="sub-menu">
                    <li><a href="#">Sub-level 1</a></li>
                    <li><a href="#">Sub-level 1</a></li>
                </ul>
            </li>
            <li><a href="#">Top Level</a>
                <ul class="sub-menu">
                    <li><a href="#">Sub-level 1</a>
                            <ul class="sub-menu">
                                <li><a href="#">Sub-level 2</a>
                                    <ul class="sub-menu">
                                    <li><a href="#">Sub-level 3</a>
                                            <ul class="sub-menu">
                                                <li><a href="#">Sub-level 4</a></li>
                                                <li><a href="#">Sub-level 4</a></li>
                                            </ul>
                                    </li>
                                    <li><a href="#">Sub-level 3</a></li>
                                </ul>
                                </li>
                                <li><a href="#">Sub-level 2</a></li>
                            </ul>
                    </li>
                    <li><a href="#">Sub-level 1</a></li>
                </ul>
            </li>

        </ul>
​