jquery treeview选择节点路径

Question

我正在使用jquery treeview plugin将目录列入树视图。我需要选择所选节点的路径。例如，看看下面的结构。

如果点击 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>