jQuery noobhere-助けが必要です。
基本的に、Goのhtml / templateの出力はひどいので、私はもっと多くのJSを使わざるを得ません（私はひどいです！）
テキスト値で「親フォルダ」リンクにグループ化する必要がある、順序付けられているがグループ化されていないリンクのリストがあります。ファイル/フォルダツリーのように。
リストは動的ですが、次のように基づいています。
<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>
したがって、ファイルは親フォルダーにグループ化する必要があり、フォルダーは「a」要素のテキストによって再帰的にグループ化されます。親の「a」は「フォルダ」であり、子の「ファイル」はそのフォルダ内にあります。
残念ながら、基になるGoスクリプトが原因で、フォルダとファイルの「a」を生成時に別々のクラスに指定することはできません。出力は、順序付けられたフォルダ/ファイルの完全に拡張されたディレクトリですが、グループ化されたリンクではありません。
RE：以下のコメント：必要な出力の例は次のようなものです。
http://labs.abeautifulsite.net/archived/jquery-fileTree/demo/
これは、ファイル/フォルダーをul / liリストに分割することを意味する可能性があることを理解していますが、それで問題ありません。それは私が苦労しているリンクテキストからのファイル対フォルダ＆フォルダレベルの検出です。
どんな助けでも大歓迎です！ありがとう！:)
これはあなたが探しているものですか？
$(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();
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加