3

これはちょっとしたパズルで、うまくいけばjQueryで解決できるはずです。これが自明の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

上記のネストされたdiv要素の値をポストオーダー方式でトラバースして出力するにはどうすればよいですか？

編集：解決策を提供し、私の質問の間違いを指摘してくれた@zshooterに感謝します。これが私の更新されたjsFiddleをポストオーダーで正しく注文したものです。

4

2 に答える 2

2

ここに行きます：

$(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-26T21:16:31.870 に答える
0

答えはすでに出ていますが、私はもっと一般的な関数を書きました：

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-03T01:56:35.973 に答える