Manually Traverse a DOM Tree Using jQuery | James Wiseman-优快云博客

本文介绍了一种使用jQuery手动遍历DOM树的方法，目的是找出DOM树的最大深度，即最深层次的嵌套元素级别。通过递归函数实现这一目标，避免使用全局变量，使解决方案更加简洁且易于维护。

Manually Traverse a DOM Tree Using jQuery | James Wiseman

Manually Traverse a DOM Tree Using jQuery

jameswiseman Programming 2010-08-24
Image via Wikipedia

jQuery does a wonderful job of traversing the DOM tree, so you might ask why you would like to do this yourself?
I recently encountered a requirement to count the maximum ‘depth’ of a DOM tree. I.e. find the level of the deepest nested element. So, I managed to knock this up in a few minutes:

view plain copy to clipboard print ?

function Recurse($item, depth) {
    $item.each(function() {
        depth.count++;
        if (depth.count > depth.max) {
            depth.max = depth.count;
        }
        Recurse($(this).children(), depth);
    });
    depth.count--;
    return depth.max;
}

$(document).ready(function() {
    alert(Recurse($("body"), { count: 0, max:0 }));
}
function Recurse($item, depth) {
    $item.each(function() {
        depth.count++;
        if (depth.count > depth.max) {
            depth.max = depth.count;
        }
        Recurse($(this).children(), depth);
    });
    depth.count--;
    return depth.max;
}

$(document).ready(function() {
    alert(Recurse($("body"), { count: 0, max:0 }));
}
A few points to note about this

depth is an object with two members, count and max. We want to keep a count of the current and maximum depth, but want to avoid global variables (it’s better practice, and makes the solution more self-contained).
JavaScript doesn’t allow us to pass variables by reference. Using the variables within the passed depth object means we can pass values to lower levels of recursion.
We must pass an object in our first call. Technically the function can be improved by including a check for this.
The function returns depth.max. Although the return value doesn’t matter when the function is called recursively, its useful for passing our intended value out to the original calling function.

You can test this out on JsFiddle: http://jsfiddle.net/RqHzf/