Javascript 从目录结构获取路径

我想从一个特定的目录结构中获取路径，比如图像上的目录结构， 如果我点击chile>citrus>orange，我需要使用“chile/citrus/orange”作为路径，以便在那里创建子目录。我试图将元素span的所有文本保存到数组中，但没有成功

代码

$(document).ready(function() {
    var files = <?php echo json_encode($folders); ?>;
    var file_tree = build_file_tree(files);
    file_tree.appendTo('#files');


    function build_file_tree(files) {

        var tree = $('<ul>');

        for (x in files) {

            if (typeof files[x] == "object") {
                var span = $('<span class="nombre">').html(x).appendTo(
                    $('<li>').appendTo(tree).addClass('folder')
                );
                var subtree = build_file_tree(files[x]).hide();
                span.after(subtree);
                span.click(function() {
                    $(this).parent().find('ul:first').toggle();
                });

            } else {
                $('<li>').html(files[x]).appendTo(tree).addClass('file').click(function(){
                    window.location=$(this).find("a").attr("href");return false;})
               //The click() function in the line above is where my links for download should be but I am unsure of what to do from here.

            }

        }

        return tree;

    }
    });  

    </script>

$（文档）.ready（函数（）{
var文件=；
var file_tree=构建文件树（文件）；
file_tree.appendTo（'#files'）；
函数生成文件树（文件）{
变量树=$（“
”）；
用于（文件中的x）{
if（文件类型[x]=“对象”）{
var span=$（''）.html（x）.appendTo(
$（“
”）.appendTo（tree.addClass（'folder'））
);
var subtree=build_file_tree（files[x]）.hide（）；
span.after（子树）；
span.单击（函数（）{
$（this.parent（）.find（'ul:first'）.toggle（）；
});
}否则{
$（“
”）.html（文件[x]）。追加到（树）。添加类（'file'）。单击（函数（）{
window.location=$（this.find（“a”）.attr（“href”）；return false；}）
//上面一行中的click（）函数是我下载链接的位置，但我不确定从这里该做什么。
}
}
回归树；
}
});  

只有php的解决方案适合您吗

    function list_directories($dir){

        $temp_dir = $_SERVER['DOCUMENT_ROOT'].$dir;

        if (is_link($dir)) {
            echo "do nothing";
        } else {

            $pattern = '/./';
            $bad = array(".", "..", ".DS_Store", "Thumbs.db", ".svn", ".git");

            $class = 'dir';
            $contents = scandir($temp_dir,1);
            $files = array_diff($contents, $bad);
            krsort($files);

            echo "<ul>";
            foreach($files as $item){
                $file_extension = strtolower(substr(strrchr($item,"."),1)); 
                echo "<li><a href='http://".$_SERVER['SERVER_NAME'].$dir.$item."'>".$item."</a></li>";
            }
            echo "</ul>";
        }
    }

函数列表\u目录（$dir）{
$temp\u dir=$\u SERVER['DOCUMENT\u ROOT'].$dir；
if（is_link（$dir））{
呼应“什么也不做”；
}否则{
$pattern='/./'；
$bad=数组（“.”、“.DS_存储”、“Thumbs.db”、“.svn”、“.git”）；
$class='dir'；
$contents=scandir（$temp_dir，1）；
$files=array_diff（$contents，$bad）；
krsort（$文件）；
回声“
”；
foreach（$files as$item）{
$file_extension=strtolower（substr（strrchr（$item，“.”），1））；
回声“
”；
}
回声“
”；
}
}

我不是jQuery的粉丝，因此我在这方面没有任何经验，所以我将尝试用纯javascript回答您的问题。这将生成变量

pathToFile

，它是文件的路径，格式为

parent/child/innerchild

。您可以对文件路径进行任何处理，以自己创建链接。您应该将其放入

click（）

函数中。编辑：如果变量

isFolder

应该查找文件夹的路径，请确保将其设置为。如果需要查找文件夹的路径，请将其设置为true。如果不是，则将其设置为false。现在，它会自动检测是否正在查找文件夹或文件的路径，并相应地执行操作。下面是：

var parts=[$(this).get(0).textContent];
for(var curParent=($(this).get(0).classList.contains('nombre')?($(this).get(0).parentNode.parentNode.parentNode):($(this).get(0).parentNode.parentNode));
    curParent.tagName.toLowerCase()!=='div';
    curParent=curParent.parentNode.parentNode
){
    parts.push(curParent.querySelector('.nombre').textContent);
}
parts.reverse();
var pathToFile=parts.join('/');

本质上，它获取当前文件（一个

），找到它的父文件（一个

），找到它里面的

，并将span的文本内容添加到

部分（所有文件夹名称的数组）。然后，它继续这个过程，直到它一直到达文件结构的顶部

编辑：

当需要查找文件夹路径时，如果在运行此代码之前将
isFolder
变量设置为true，则它现在应该可以处理文件夹

它现在应该能够自动检测它是在查找文件夹的路径还是只查找文件的路径，因此您不需要再设置任何变量

请注意，它未经测试。如果它不起作用，我很乐意修理它。如果它不工作，请告诉我发生了什么以及控制台中的任何错误

我希望我帮了忙
 它们不是真正存在的目录，只是网页本身的一棵树。哦，你的意思是，如果单击链接，并且你的$folders是你任意组合的数组，你想创建目录吗？嗨，所有目录都存在，如果我得到一个橙色订单，我必须在橙色文件夹内创建一个名为“shipment01”的子文件夹，我需要新shipment01文件夹（chile/citrus/orange/）所在的最后一个文件夹的路径。在这种情况下，您需要坚持使用php（或任何服务器端语言）。您可以扩展我的代码以按需追加目录，但此时我应该问，创建所有这些目录的目的是什么？当你有1亿台设备时会发生什么？难道你不应该考虑一个数据库解决方案吗？你说得对！将来，每个水果文件夹中可能会有这么多目录。每个发货文件夹将包含至少10个文件。这只是一个快速的瞬间解决方案。稍后将评估Db解决方案。谢谢Marka，我测试了您的代码，几乎成功了。我点击智利->柑橘->橙色，第一次点击智利输出“智利/智利”，第二次点击柑橘输出“智利/蓝莓/柑橘”，第三次点击橙色输出“智利/蓝莓/克莱门蒂娜/橙色”，我没有点击蓝莓和克莱门蒂娜。好的。抱歉，只有当您单击文件时，它才起作用。如果你点击一个文件夹，我会对它进行编辑，使它也能工作。同时，您可以尝试单击一个文件，看看它是否输出了正确的内容。谢谢好的，修好了。这是一个非常小的问题。现在它非常粗糙，我会设法把它修好的。不再那么粗糙了，事实上它现在是全自动的！它将自动检测是否正在查找文件或文件夹的路径，并将执行正确的操作