HTML structure in treeview with jQuery

Question

I need to display a HTML structure in a treeview. I found some jQuery treeview plugins but they generally require a list.

Let's take a simple HTML (nodes may have different tags, not only 'div'):

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

I want to display it like this:

node1

• node2
  • node3
  • node4

For now, i'm using this jQuery plugin: treeview

So I need to convert the HTML to an unordered list like this:

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

How can I do this using jQuery? If you think a different approach would be better, please let me know.

Answer 1

Here you go...that was fun. Demo - Updated to not be specific to div tags, and return an element, that could be turned into a html string.

$.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);