jQuery对象的递归迭代

时间:2010-02-04 23:17:01

标签: jquery json object iteration recursion

前几天我以为我在jQuery中看到了一个对象迭代器,它有一个可以设置为递归遍历子对象的标志。我认为它是jQuery.each()的一部分,但现在我没有在文档中看到这种功能。

jQuery中是否有任何可以自动递归的迭代器?

(我知道如何在javascript中执行此操作。只是想知道我是否真的看到了我以为我看到的内容。)

非常感谢!

编辑:为了清楚起见,我想到了一个像jQuery.each()这样的实用程序方法,它将在javascript对象及其嵌套对象上递归迭代。

鉴于下面的示例,each()方法将遍历所有对象,包括myobj.obj2.key2中的嵌套对象。

我本可以发誓,我在jQuery文档中看到了一些关于它的内容,但现在我找不到了。

感谢。

var myobj = {
    obj1: {key1:'val1', key2:'val2'},
    obj2: {key1:'val1', key2: {nest1:'val1', nest2:'val2', nest3:'val3'}},
    obj3: {key1:'val1', key2:'val2'}
}

$jQuery.each(myobj, function(key,val) {
    // Code to run over each key/val pair
    // Does so recursively to include all nested objects
})

4 个答案:

答案 0 :(得分:37)

.find('selector')方法基本上是.children()的重复版本,并且会找到与选择器匹配的任何后代对象,而不是.children()只查找第一级中的对象。后代。

第二次编辑(我第一次说得太厉害了,搞砸了一下代码!):

好吧,我不认为这个功能作为一个标志是有意义的:你可以非常高兴地永远地通过该对象递归(相信我,我打破了火狐这样做),所以你需要某种互动以确保你仅在子对象是有效的递归候选者时递归。

您需要做的就是将功能拆分为:

var myobj = {
    obj1: {key1:'val1', key2:'val2'},
    obj2: {key1:'val1', key2: {nest1:'val1', nest2:'val2', nest3:'val3'}},
    obj3: {key1:'val1', key2:'val2'}
}

$jQuery.each(myobj, function(key, val) { recursiveFunction(key, val) });

    function recursiveFunction(key, val) {
        actualFunction(key, val);
        var value = val['key2'];
        if (value instanceof Object) {
            $.each(value, function(key, val) {
                recursiveFunction(key, val)
            });
        }

    }

function actualFunction(key, val) { /// do stuff }

答案 1 :(得分:9)

上面的@Ed Woodcock版本的略微简化版本。我需要使用它的方法是输出带有命名链接的HTML项目符号列表。

var list = "<ul>";
$.each(data, recurse);

function recurse(key, val) {
    list += "<li>";
    if (val instanceof Object) {
        list += key + "<ul>";
        $.each(val, recurse);
        list += "</ul>";
    } else {
        list += "<a href='" + val + "'>" + key + "</a>";
    }
    list += "</li>";
}
list += "</ul>";

$("#container").html(list);

答案 2 :(得分:0)

这个q和a非常有帮助。谢谢。 (我也很欣赏cookie的参考。我还在讨论这本书!)。

这是我的版本,为简单的i18n jQuery解决方案进行“搜索和替换”(这可能对某人有帮助)。如果术语在字典中,它会发现包含在类中的术语将替换它。

小提琴:http://jsfiddle.net/orolo/CeY5Y/11/

HTML:

In the <span class="i18n">Clear</span> and also <span class="i18n">Save Widget</span>. I'm <span class="i18n">On</span> the <span class="i18n">sub3</span> and <span class="i18n">PDF</span>.

javascript / jQuery:

var term = "";

var customDict = {
    "Level One": {
        "Clear": "1234",
        "CSV": "CSV",
        "First": "First",
        "Last": "Last",
        "Next": "Next",
        "On": "42",
        "Off": "Off",
        "PDF": "alpha",
        "Prev": "Prev",
        "Rows": "Rows",
        "Save Widget": "saver widgetor",
        "Stats": "statistiques",
        "sub": {
            "sub2": {
                "sub3": "inception"
            }
        }
    }
};

function recursiveLookup(key, val) {
    //test for a match between term and key
    if (key === term) {
        $('.i18n').each(function() {
            if ($(this).text() === key) {
              $(this).text(val);  
            }
        });
    }
    //val is an object or no match? recur
    if (val instanceof Object) {
        $.each(val, function(key1, val1) {
            recursiveLookup(key1, val1);
        });
    }
}

function convert() {    
    $('.i18n').each(function(key, val) {
        term = $(this).text();  
        $.each(customDict, function(key, val) {
            recursiveLookup(key, val);
        });

    });
}


/*call the function*/
convert();

答案 3 :(得分:0)

你可以这样轻松地做到这一点

$(this).children().each(function(index, element) {
...
});