通过N级孩子进行迭代

Question

这似乎是一些可能"内置于"jQuery的东西,但我认为它仍然值得一提.

我有一个问题,通过迭代元素的所有子元素可以很容易地解决这个问题.我最近发现我需要考虑一些情况,我需要做一个或两个比"1级"更深的级别(只调用.children()一次)我正在做的事情.

jQuery.each(divToLookAt.children(), function(index, element)
    {
        //do stuff
    }
    );  

这就是我目前正在做的事情.为了深入第二层,我在为每个元素执行代码之后运行另一个循环.

jQuery.each(divToLookAt.children(), function(index, element)
{
     //do stuff
    jQuery.each(jQuery(element).children(), function(indexLevelTwo, elementLevelTwo)
    {
        //do stuff
    }
    );  
}
);

如果我想深入到另一个层面,我必须重新做到这一点.

这显然不太好.我想宣布一个"级别"变量,然后全部照顾.任何人对干净有效的jQueryish解决方案有什么想法？

谢谢!

Answer 1

这是一个很棒的问题,因为水平很深.看看小提琴.

将其转换为插件.

启用

$('#div').goDeep(3, function(deep){ // $.fn.goDeep(levels, callback)
    // do stuff on `this`
});

插入

$.fn.goDeep = function(levels, func){
    var iterateChildren = function(current, levelsDeep){
        func.call(current, levelsDeep);

        if(levelsDeep > 0)
            $.each(current.children(), function(index, element){
                iterateChildren($(element), levelsDeep-1);
            });
    };

    return this.each(function(){
        iterateChildren($(this), levels);
    });
};