Javascript jQuery:Group<;a>;基于文本值的链接
jquerynoob在这里-需要一些帮助 基本上,因为Go的html/模板输出很糟糕,我不得不使用更多的JS(我很糟糕!) 我有一个有序但未分组的链接列表,需要按文本值分组到“父文件夹”链接中。类似于文件/文件夹树 该列表是动态的,但基于以下内容:Javascript jQuery:Group<;a>;基于文本值的链接,javascript,jquery,html,list,filesystems,Javascript,Jquery,Html,List,Filesystems,jquerynoob在这里-需要一些帮助 基本上,因为Go的html/模板输出很糟糕,我不得不使用更多的JS(我很糟糕!) 我有一个有序但未分组的链接列表,需要按文本值分组到“父文件夹”链接中。类似于文件/文件夹树 该列表是动态的,但基于以下内容: <div id="Files"> <a>file.rb</a> <a>Somefile.rb</a> <a>folder</a> <a>folder/le
<div id="Files">
<a>file.rb</a>
<a>Somefile.rb</a>
<a>folder</a>
<a>folder/level2</a>
<a>folder/level2/file.js</a>
<a>folder/level2/level3/anotherfile.js</a>
</div>
我理解这可能意味着将文件/文件夹拆分为ul/li列表,但我同意。这是从我正在努力处理的链接文本中检测文件与文件夹和文件夹级别
非常感谢您的帮助!谢谢!:) 这就是你要找的吗
$(文档).ready(函数(){
var aList=$('#Files>a');
var fileList=[];
$。每个($('#Files>a'),函数(i,obj){
push($(obj.html());
});
var-tree=GetNodeTree(文件列表);
控制台日志(树);
var html=绘图菜单(树,“http://www.google.nl");
log(html);
$('#Files').html(html);
});
函数GetNodeTree(文件列表){
if(fileList.length==0){
返回[];
}
var childTree=[];
$.each(文件列表、函数(i、路径){
var nodeNames=path.split(“/”);
if(子树[nodeNames[0]]==未定义){
子目录树[nodeNames[0]]=[];
子目录树[nodeNames[0]['files']=[];
}
如果(节点名称.长度>1){
var childPath=nodeNames.slice(1.join(“/”);
childTree[nodeNames[0]['files'].push(childPath);
}
});
for(childTree中的var键){
childTree[key]['name']=key;
childTree[key]['files']=GetNodeTree(childTree[key]['files']);
}
返回子树;
}
功能绘图菜单(树、基本路径){
var元素=”;
for(树中的变量键){
var节点=树[键];
var path=basepath+“/”+节点['name'];
var childMenu=DrawMenu(节点['files'],路径);
elements+=$('').html();
}
如果(元素长度>0){
元素=“”+元素+”
”;
}
返回$(''+元素+'').html();
}
举一个你正在寻找的例子。我有一个想法,你想要什么,但我需要一个例子,从上面的例子最终产品。谢谢。***最终产品的html示例***在问题中回答了这个问题-谢谢!)谢谢你!这正是我要找的!唯一的差异是它似乎为没有子链接的链接生成了sub-ul:完美!但它似乎已经删除了李的链接。每一个li都应该只是一个指向它自己的链接。这是我给你的最后一个更新:它创建了一个带有相应文件路径的标记。替换为您的base-webaddress。非常感谢。大量帮助!:)
$(document).ready(function(){
var aList = $('#Files > a');
var fileList = [];
$.each($('#Files > a'), function(i, obj){
fileList.push($(obj).html());
});
var tree = GetNodeTree(fileList);
console.log(tree);
var html = DrawMenu(tree, "http://www.google.nl");
console.log(html);
$('#Files').html(html);
});
function GetNodeTree(fileList){
if(fileList.length === 0){
return [];
}
var childTree = [];
$.each(fileList, function(i, path){
var nodeNames = path.split("/");
if(childTree[nodeNames[0]]===undefined){
childTree[nodeNames[0]] = [];
childTree[nodeNames[0]]['files'] = [];
}
if(nodeNames.length>1){
var childPath = nodeNames.slice(1).join("/");
childTree[nodeNames[0]]['files'].push(childPath);
}
});
for(var key in childTree) {
childTree[key]['name'] = key;
childTree[key]['files'] = GetNodeTree(childTree[key]['files']);
}
return childTree;
}
function DrawMenu(tree, basepath){
var elements = "";
for(var key in tree) {
var node = tree[key];
var path = basepath + "/" + node['name'];
var childMenu = DrawMenu(node['files'], path);
elements += $('<div><li><a href="'+ path + '">' + node['name'] + childMenu + '</a></li></div>').html();
}
if(elements.length>0){
elements = '<ul>'+elements+'</ul>';
}
return $('<div>'+elements+'</div>').html();
}