javascript - HTML structure in treeview with jQuery - Stack Overflow

admin管理员组

文章数量:1393050

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.

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.

• javascript
• jquery
• html
• treeview
• html-lists

Share Improve this question Follow edited Feb 27, 2013 at 20:05 Konstantin Dinev 35k1414 gold badges7878 silver badges102102 bronze badges asked Feb 27, 2013 at 19:00 VictorVictor 62177 silver badges1616 bronze badges 2

• Can you not do a string-replace in your source code editor? – Blazemonger Commented Feb 27, 2013 at 19:03
• It should work dynamically, a replace doesn't solve the problem. – Victor Commented Feb 27, 2013 at 19:05

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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

本文标签： javascriptHTML structure in treeview with jQueryStack Overflow