javascript - jquery treeviewで選択したノードパス

Question

ディレクトリをツリービューにリストするためにjqueryツリービュープラグインを使用しています。選択したノードのパスを選択する必要があります。たとえば、以下の構造を見てください。

config.phpがクリックされた 場合、 SITE/classes/config.phpのようなパスが必要です

誰かがこの問題を回避するのを手伝ってくれますか?

Answer 1

このデモではすべてを説明する必要があります。本文セクションに貼り付けるだけです。ページに jQuery がリンクされていることを確認してください。

JavaScript は親要素をループし、ブレッドクラム パスを作成します。

<div id="path">click some element</div>

<ul>
    <li><a href="#">SITE</a>
        <ul>
            <li><a href="#">classes</a>
                <ul>
                    <li><a href="#">class.file1.php</a></li>
                    <li><a href="#">class.file2.php</a></li>
                    <li><a href="#">class.file3.php</a></li>
                    <li><a href="#">class.file4.php</a></li>
                    <li><a href="#">class.file5.php</a></li>
                </ul>
            </li>
            <li><a href="#">img</a></li>
        </ul>
    </li>
</ul>

<style type="text/css">
li a { cursor: pointer; text-decoration: none }
li.active > a { color: red }
</style>

<script>
function getPath(a) {
    var path = $(a).text();
    var $parent = $(a).parents("li").eq(1).find("a:first");

    if ($parent.length == 1) {
        path = getPath($parent) + "/" + path;
    }

    return path;
}

$(function(){
    $("ul a").click(function(){
        $("#path").text(getPath(this));

        $("li.active").removeClass("active");
        $(this).closest("li").addClass("active");
        this.preventDefault();
    });
});
</script>