迭代 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

var lvlFunc = function(elmt, depth) {
    if(depth > 0) {
        elmt.children().each(function(i, e){
            // do stuff on the way down
            lvlFunc($(this), --depth);
            // do stuff on the way out
        });
        // do stuff
    }
};

lvlFunc(divToLookAt, 3);

如果“东西”执行的顺序很重要，请确保将“做东西”代码放在正确的位置。

Answer 2

这是一个很棒的问题，因为级别很深。 查看小提琴。

将其转换为插件。

激活

$('#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);
    });
};

Answer 3

这个问题太棒了:-)

如果你知道你的 DOM 不是太大，你可以找到所有的后代并过滤掉那些不符合条件的：

var $parent = $('#parent');
var $childrenWithinRange = $parent.find('*').filter(function() {
  return $(this).parents('#parent').length < yourMaxDepth;
});

之后，jQuery 实例“$childrenWithinRange”将是所有的子元素该父

的节点位于某个最大深度内。如果你想要确切的深度，你可以切换“<”到“= =”。我可能在某个地方有一个人离开了。

Answer 4

您应该能够使用 all-selector^{< i>(docs)}，child-选择器^（文档） 和 多重选择器^(docs)，如下所示：

示例： http://jsfiddle.net/mDu9q/1/

$('#start > *,#start > * > *,#start > * > * > *').doSomething();

...或者如果您仅想要以 3 级深度为目标，您可以这样做：

示例： http:// /jsfiddle.net/mDu9q/2/

$('#start > * > * > *').doSomething();

这两个选择器都对 querySelectorAll 有效，这意味着受支持的浏览器的性能大幅提升。

Answer 5

这个问题听起来像是答案可能是 XPATH。我对浏览器支持不太了解，但在 XPATH 中，您只需要创建一个类似

/*/*/*/*

• https 的路径： //developer.mozilla.org/en/introduction_to_using_xpath_in_javascript
  （适用于 FF、Chrome、Safari、Opera）
• http://msdn.microsoft.com/en-us/library/aa335968%28v=vs.71%29.aspx
  （还没试过）