jorder选择的嵌套dom元素的后序遍历

这应该是一个很好的小谜题，希望可以通过jQuery解决。这是一个self explanatory jsFiddle。请注意，我正在寻找一种通用解决方案，根据它们在dom树中的位置遍历dom中感兴趣的元素。我提供这个简化案例作为例子，所以你可以测试你的解决方案，它也更容易理解。jorder选择的嵌套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.

来源

2012-11-26 Aras

因此，要清楚，你想要的输出是...？ – nnnnnn

好吧，可以说如果你解决它，它看起来很自然;） – Aras

指标很重要或可以被丢弃？ – zbrunson

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

来源

2012-11-26 21:16:31 zbrunson

看起来很有前途，但是我从控制台中得不到输出，你是不是更新了小提琴？ – Aras

nope，我在控制台得到输出... – zbrunson

哦不等，我得到零一个三...而不是零一二。有什么缺失？ – Aras

的答案已经给出，但我写了一个比较通用的功能：

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

来源

2014-02-03 01:56:35

jorder选择的嵌套dom元素的后序遍历

回答

相关问题