代码之家 › 专栏 › 技术社区 › user113716

对象上的jQuery递归迭代

recursion iteration object json jquery

user113716 · 技术社区 · 14 年前

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

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

(我知道如何用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 回复 | 直到 14 年前

Mickael Lherminez hyankov 4 年前

.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
}

Chris Barr 12 年前

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

Justin T. Watts 11 年前

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

orolo 13 年前

这个问答非常有帮助。多谢各位(我也很感激你的推荐信。我还在苦读那本书!)。

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

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