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

这是一个很棒的问题，因为水平很深。 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); }); };

Answer 2

这个问题太棒了： - ）

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

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

之后，jQuery实例“$ childrenWithinRange”将是该父<div>的所有子节点，它们在某个最大深度内。如果你想要那个深度，你可以切换“＆lt;”到“===”。我可能会在某个地方离开。

Answer 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，这意味着支持的浏览器可以大幅提升性能。

Answer 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 （还没试过）

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

如果执行了“填充”内容的事项，请确保将“do stuff”代码放在正确的位置。

通过N级孩子进行迭代

5 个答案: