Struttura HTML in treeview con jQuery - javascript, jquery, html, treeview, html-lists

Devo visualizzare una struttura HTML in una vista ad albero. Ho trovato alcuni plugin per treeview jQuery ma in genere richiedono un elenco.

Prendiamo un semplice HTML (i nodi possono avere tag diversi, non solo "div"):

<div id="node1">
<div id="node2">
<div id="node3"></div>
<div id="node4"></div>
</div>
<div>

Voglio mostrarlo così:

Per ora, sto usando questo plugin jQuery: visualizzazione ad albero

Quindi ho bisogno di convertire l'HTML in un elenco non ordinato come questo:

<ul>
<li>node1
<ul>
<li>node2
<ul>
<li>node3</li>
<li>node4</li>
</ul>
</li>
</ul>
</li>
</ul>

Come posso farlo usando jQuery? Se pensi che un approccio diverso sarebbe meglio, faccelo sapere.

risposte:

Ecco qua ... è stato divertente. dimostrazione - Aggiornato per non essere specifico di div tag e restituisce un elemento che potrebbe essere trasformato in a html stringa.

$.fn.convertToUL = function(isTop) {
if(isTop==null) isTop=true;
var ul=$("<ul>");
var li=$("<li>");
li.append($(this).attr("id"));
var children=0;
$(this).children().each(function(){
ul.append($(this).convertToUL(false));
children++;
});
if(children>0)
li.append(ul);
if(li.is(":empty"))
return "";
if(isTop)
return $("<ul>").append(li);
return li;
}

//to get text of elements use .wrap("<div/>").parent().html()
var ulElement=$("#node1").convertToUL();
alert(ulElement.wrap("<div/>").parent().html());
$("#node1").replaceWith(ulElement);