Question

这应该是一个不错的小谜题，并希望通过jQuery解决。这是一个self explanatory jsFiddle。请注意，我正在寻找一个通用的解决方案，根据它们在dom树中的位置遍历dom中感兴趣的元素。我提供了这个简化案例作为示例，因此您可以针对它测试您的解决方案，也更容易理解。

DOM：

<div class="element" value="Hi5!">
    <div class="element" value="Zero"></div>
    <div class="junk" value="no no!"></div>
    <div class="element" value="Four">
        <div class="element" value="One"></div>
        <div class="element" value="Three">
            <div class="element" value="Two"></div>
        </div>
    </div>
    <div class="element" value="Five"></div>
</div>

我得到的代码以不希望的顺序打印元素：

$(document).ready(function(){
    console.log("ready");
    $(".element").each(function(index, item){
       console.log(index + " | ",  item.getAttribute('value'));
    });
});

当前输出：

ready
0 | Hi5!
1 | Zero
2 | Two
3 | One
4 | Four
5 | Three
6 | Five

如何以postorder方式遍历和打印上面嵌套div元素的值？

编辑：感谢@zshooter提供解决方案并指出我的问题中的错误。这是我的updated jsFiddle ordered properly in postorder.

Answer 1

here you go：

$(document).ready(function(){
    console.log("ready");

    $("body").children('.element').each(function(index, item) {
        visitNode(item);
    });
});

function visitNode(element) {
    $(element).children('.element').each(function(index, item) {
        visitNode(item);
    });
    console.log(element.getAttribute('value'));
}

Answer 2

已经给出了答案，但我写了一个更通用的函数：

function applyPostOrder(selector, fn, filter)
{
    (function visit() {
        $node = jQuery(this);
        $node.children(filter).each(visit);

        if (!filter || $node.is(filter)) {
            fn(this);
        }
    }).call(jQuery(selector).get(0));
}

此函数将为找到的与给定过滤器匹配的每个节点调用fn。这就是你怎么称呼它：

function visitItem(node)
{
    console.log(node.getAttribute('value'));
}

jQuery(function($) {
    console.log("ready");
    applyPostOrder('body', visitItem, '.element');
});

后缀遍历由jQuery选择的嵌套dom元素

2 个答案: