jQuery 递归迭代对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2203958/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery recursive iteration over objects
提问by user113716
The other day I thought I saw an object iterator in jQuery that had a flag that could be set to recursively iterate over child objects. I thought it was part of jQuery.each(), but now I don't see that capability in the docs.
前几天我以为我在 jQuery 中看到了一个对象迭代器，它有一个标志，可以设置为递归迭代子对象。我认为它是 jQuery.each() 的一部分，但现在我在文档中看不到该功能。
Is there any such iterator in jQuery that can be automatically recursive?
jQuery 中有没有这样的迭代器可以自动递归？
(I know how to do it in javascript. Just wondering if I actually saw what I thought I saw.)
（我知道如何在 javascript 中做到这一点。只是想知道我是否真的看到了我认为我看到的内容。）
Thanks much!
非常感谢！
EDIT:To be clear, I was thinking of a utility method like jQuery.each() that will iterate recursively over javascript objects and their nested objects.
编辑：明确地说，我正在考虑像 jQuery.each() 这样的实用方法，它将递归迭代 javascript 对象及其嵌套对象。
Given the example below, the each() method would iterate over all objects, including the nested one in myobj.obj2.key2.
在下面的示例中，each() 方法将遍历所有对象，包括 myobj.obj2.key2 中的嵌套对象。
I could have sworn that I saw something in jQuery docs about that, but now I can't find it.
我可以发誓我在 jQuery 文档中看到了一些关于它的东西，但现在我找不到它。
Thanks.
谢谢。
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
})
回答by Ed James
The .find('selector') method is basically a recusive version of .children(), and will find any descendant object that matched the selector, as opposed to .children() which only finds objects in the first level of descendants.
.find('selector') 方法基本上是 .children() 的递归版本，它将查找与选择器匹配的任何后代对象，而 .children() 只查找第一级后代中的对象。
2nd EDIT (I phrased badly the first time, and messed up the code a bit!):
第二次编辑（我第一次措辞不好，把代码弄乱了一点！）：
Ok, I don't think this functionality as a flag would make sense: you can quite happily recurse through that object forever (believe me, I broke firefox doing it), so you need some sort of interaction to make sure you only recurse when the child object is a valid recursion candidate.
好吧，我认为这个功能作为一个标志没有意义：你可以很高兴地永远遍历那个对象（相信我，我打破了 Firefox 这样做），所以你需要某种交互来确保你只在以下情况下递归子对象是有效的递归候选对象。
What you need to do is simply split the function like so:
您需要做的只是像这样拆分函数：
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
}
回答by CBarr
A slightly simlified version of @Ed Woodcock's version above. They way I needed to use this was to output an HTML bulleted list with named links.
上面@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);
回答by Justin T. Watts
you can do this much easier as such
你可以更容易地做到这一点
$(this).children().each(function(index, element) {
...
});
回答by orolo
This q and a was so helpful. Thank you. (I also appreciated the cookie reference. I'm still slogging through that book!).
这个 q 和 a 很有帮助。谢谢你。（我也很欣赏 cookie 参考。我仍在努力阅读那本书！）。
Here is my version doing a "search and replace" for a simple i18n jQuery solution (this may be helpful to someone). It finds the term wrapped in a class replaces it if the term is in the dictionary.
这是我的版本为一个简单的 i18n jQuery 解决方案执行“搜索和替换”（这可能对某人有帮助）。如果该术语在字典中，它会找到包含在类中的术语替换它。
Fiddle: http://jsfiddle.net/orolo/CeY5Y/11/
小提琴：http: //jsfiddle.net/orolo/CeY5Y/11/
HTML:
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:
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();
