javascript - jquery treeview selected node path

Question

I'm using jquery treeview plugin to list a directory into a treeview. I need to select path of selected node. for example, have a look at the structure below.

If config.php gets clicked then i need the path like SITE/classes/config.php

Can somebody help me to get around this issue?

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>