使用jquery的递归函数每个变量值不更新答案

【问题标题】：recursive function using jquery each variable value not updating使用jquery的递归函数每个变量值不更新
【发布时间】：2014-11-28 19:48:48
【问题描述】：

我有以下格式的 HTML：

<div class="propBasic containerForReordering">
    <ul itemid="WZ_VS_Test_msgSection" class="sortable ui-sortable">
        <li itemid="WZ_VS_Test_Top" class="liSortable ui-sortable-handle">WZ_VS_Test_Top
            <ul itemid="WZ_VS_Test_Top" class="sortable ui-sortable">
                <li itemid="WZ_VS_Test_Top.First" class="liSortable ui-sortable-handle">WZ_VS_Test_Top.First
                    <ul itemid="WZ_VS_Test_Top.First" class="sortable ui-sortable">
                        <li itemid="WZ_VS_Test_Top.First.1" class="liSortable ui-sortable-handle">WZ_VS_Test_Top.First.1
                            <ul itemid="WZ_VS_Test_Top.First.1" class="sortable ui-sortable">
                                <li itemid="" class="liSortable ui-sortable-handle">{{Drop Here}}</li>
                            </ul>
                        </li>
                        <li itemid="WZ_VS_Test_Top.First.2" class="liSortable ui-sortable-handle">WZ_VS_Test_Top.First.2
                            <ul itemid="WZ_VS_Test_Top.First.2" class="sortable ui-sortable">
                                <li itemid="" class="liSortable ui-sortable-handle">{{Drop Here}}</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li itemid="WZ_VS_Test_Top.Second" class="liSortable ui-sortable-handle">WZ_VS_Test_Top.Second
                    <ul itemid="WZ_VS_Test_Top.Second" class="sortable ui-sortable">
                        <li itemid="WZ_VS_Test_Top.Second.1" class="liSortable ui-sortable-handle">WZ_VS_Test_Top.Second.1
                            <ul itemid="WZ_VS_Test_Top.Second.1" class="sortable ui-sortable">
                                <li itemid="" class="liSortable ui-sortable-handle">{{Drop Here}}</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li itemid="WZ_VS_Test_Top.Second.2" class="liSortable ui-sortable-handle">WZ_VS_Test_Top.Second.2
                    <ul itemid="WZ_VS_Test_Top.Second.2" class="sortable ui-sortable">
                        <li itemid="" class="liSortable ui-sortable-handle">{{Drop Here}}</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

我正在运行一个 javascript 递归循环来获得 |||分隔 itemid---parentid---order 的字符串，如下所示：

var getNewOrderForItemAndDescendents = function(selector) {
    var sNewOrder = "";
    var nOrder = 1;

    $(selector).find('>ul.sortable').each(function(index, obj) {           
        sNewOrder += "|||" + $(this).attr('itemid') + "---" + ($(this).parents('ul.sortable:first').length > 0 ? $(this).parents('ul.sortable:first').attr('itemid') : 'NULL')
                + "---" + nOrder++;

        $(this).find('> li').each(function() {
            sNewOrder += getNewOrderForItemAndDescendents($(this));
        });
    });

    return sNewOrder;
}

这样称呼它

var result = getNewOrderForItemAndDescendents($('.containerForReordering'));

ERRPR 它的返回结果类似于（注意每个分隔符前的最后一个数字 1 |||）：

|||WZ_VS_Test_msgSection---NULL---1|||
    WZ_VS_Test_Top---WZ_VS_Test_msgSection---1|||
        WZ_VS_Test_Top.First---WZ_VS_Test_Top---1|||
            WZ_VS_Test_Top.First.1---WZ_VS_Test_Top.First---1|||
            WZ_VS_Test_Top.First.2---WZ_VS_Test_Top.First---1|||
        WZ_VS_Test_Top.Second---WZ_VS_Test_Top---1|||
            WZ_VS_Test_Top.Second.1---WZ_VS_Test_Top.Second---1|||
            WZ_VS_Test_Top.Second.2---WZ_VS_Test_Top---1

所以基本上虽然它会尊重函数的本地副本 sNewOrder（在递归上下文中），但 nOrder 变量不会从 jquery 每次循环中递增，并且它始终保持在 1。

我做错了什么？？

PS：我尝试使用 each() 的索引，即使在第二个元素上它也总是为零！！！确实很奇怪的问题。

PS2：在 JS 中做了一个小改动，现在不再为函数调用提供命令，这在任何方面都是多余的。每个级别的数字都应该以 1 开头，但对于兄弟姐妹，数字应该是 2、3、4...

【问题讨论】：

标签： javascript jquery recursion

【解决方案1】：

没关系，我想通了。我的 HTML 结构是这样的，每个项目 UL 都在单独的 LI 中，因此永远不会有任何同级 UL，因此每个项目都不会运行两次

更新代码：

var getNewOrderForItemAndDescendents = function(selector) {
    var sNewOrder = "";
    var nOrder = 1;

    $(selector).find('>li').each(function(index, obj) {
        if ($(this).attr('itemid')) {
            sNewOrder += "|||" + $(this).attr('itemid') + "---" + ($(this).parents('li:first').length > 0 ? $(this).parents('li:first').attr('itemid') : $(this).parents('ul:first').attr('itemid'))
                + "---" + nOrder;

            nOrder = nOrder + 1;

            $(this).find('> ul').each(function() {
                sNewOrder += getNewOrderForItemAndDescendents($(this));
            });
        }
    });

    return sNewOrder;
}

【讨论】：