遍历 N 级子级

Posted 2023-02-22

【中文标题】遍历 N 级子级

【英文标题】：Iterating Through N Level Children

【发布时间】：2011-06-10 18:04:19

【问题描述】：

这看起来很简洁，可以“内置”到 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 解决方案有任何想法吗？

谢谢！

【问题讨论】：

您在 elemtns 中寻找什么？

+1 因为我很惊讶 jquery 没有为此提供本机选择器，并且因为我有点想念手动 dom 遍历哈哈。

【参考方案1】：

这是一个很棒的问题，因为关卡很深。 Check out the fiddle.

将其转换为插件。

激活

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

【讨论】：

让它只是过滤掉东西，而不是成为一些能力有限的访问者。更多 jquery'ish/flexible imo。

@chris - 我看不出如何使用容器获取所有元素，然后基于动态选择器进行过滤可能更灵活/高效

【参考方案2】：

这个问题太棒了:-)

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

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

之后，jQuery 实例 "$childrenWithinRange" 将是父 <div> 在某个最大深度内的所有子节点。如果你想要那个深度，你可以将“

【讨论】：

+1 我会这样做，除非我觉得我会过滤掉对非常深的后代所做的太多事情。

【参考方案3】：

您应该可以像这样使用all-selector^(docs)、child-selector^(docs) 和multiple-selector^(docs) 来做到这一点：

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

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

...或者如果您仅想要将孩子定位到 3 层深度，您可以这样做：

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

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

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

【参考方案4】：

这个问题听起来可能是 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 （还没试过）

【参考方案5】：

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

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