jQuery对对象的递归迭代

Posted 2023-02-22

【中文标题】jQuery对对象的递归迭代

【英文标题】：jQuery recursive iteration over objects

【发布时间】：2011-01-13 07:43:14

【问题描述】：

前几天我想我在 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
)

【问题讨论】：

您希望这是什么样的？显示了哪些键、值对？

我想我只是认为它会做一个'typeof'测试或其他东西，并在找到一个对象时跳入一个对象。键/值对将适用于它当前所在的任何对象。

【参考方案1】：

.find('selector') 方法基本上是 .children() 的递归版本，它会查找匹配选择器的任何后代对象，而 .children() 仅查找第一级的对象后代。

第二次编辑（我第一次措辞很糟糕，代码有点混乱！）：

好吧，我不认为这个功能作为一个标志是有意义的：你可以很高兴地永远递归通过那个对象（相信我，我打破了 firefox 这样做），所以你需要某种交互来确保你仅当子对象是有效的递归候选时才会递归。

你需要做的只是像这样拆分函数：

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

【讨论】：

抱歉，Ed，我不清楚。我的意思是像 jQuery.each() 这样的实用程序，它递归地迭代 javascript 对象。不在 DOM 上。

别担心，我自己现在也很漂亮，这可能是一个很好的功能（用于树木和其他东西）

嗨，埃德。您能否解释一下您对不同类型问题的含义？在我看来，它将依赖不同的类型来检测对象的存在。另外，我对您答案的 if() 语句部分感到有些困惑，可能是因为我根本没有考虑 DOM。而只是一个用于幕后工作的 javascript 实用程序（当然，它可以在需要时与 DOM 交互）。谢谢。

好吧，理论上一个字符串可以像 KVP 一样工作，所以你会在没有 if 语句的情况下无限递归（我只是使用了完全错误的代码：当我'还没吃过;) ) 看看这对你是否更好。

是的，我明白了。而且我知道如何像您一样递归迭代。我只是以为我在 jQuery 的某个地方看到了该功能。想象一个 $.each() 方法，您在其中传递要迭代的对象集、将在每对对象上执行的函数以及一个告诉它递归的标志。如果设置了该标志，它将在每次迭代期间调用 if() 语句来测试对象，就像您的代码一样。它会全部隐藏在 $.each() 中。现在去吃饼干吧！ ;o)

【参考方案2】：

上述@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);

【参考方案3】：

您可以更轻松地做到这一点

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

【参考方案4】：

这个 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();