使用jquery修改Dom元素？

Question

嗨，所有我有一个html，这需要是modified..this是我的html

        <div class="navbar navbar-inverse">
<div class="navbar-inner">
    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
    <div class="nav-collapse collapse">
        <ul class="nav-pills SC-Topmenu nav">


            <div class="top-nav ">
                <div class="title-bar">
                    <div data-original-title="Doubleclick for edit" class="title username editable editable-click" data-type="text" data-pk="" data-url="/post" rel="tooltip" data-placement="bottom">Home</div>
                </div>
                <div class="panel"></div>
            </div>
            <div style="display: inline-block;" class="top-nav">
                <div class="title-bar">
                    <div style="display: block;" data-original-title="Doubleclick for edit" class="title username editable editable-click editable-unsaved" data-type="text" data-pk="" data-url="/post" rel="tooltip" data-placement="bottom">Categorys</div>
                </div>
                <div class="panel"></div>
                <div style="display: table-cell;" class="jstree jstree-8 jstree-2">
                    <ul>
                        <li id="Li7" class="Root jstree-last jstree-open"><ins class="jstree-icon">&nbsp;</ins><a href="javascript:void(0)" class="Titleanchor"><ins class="jstree-icon">&nbsp;</ins>Title1</a>
                            <ul class="MenuContentholder">
                            <li><a><ins class="jstree-icon">&nbsp;</ins>1</a></li>
                        <li><a><ins class="jstree-icon">&nbsp;</ins>2</a></li>
                            </ul>
                            </li>
                    </ul>
                </div>
                <div style="display: table-cell;" class="jstree jstree-10 jstree-focused jstree-4">
                     <ul>
                        <li id="Li6" class="Root jstree-last jstree-open"><ins class="jstree-icon">&nbsp;</ins><a href="javascript:void(0)" class="Titleanchor"><ins class="jstree-icon">&nbsp;</ins>Title2</a>
                            <ul class="MenuContentholder">
                            <li><a><ins class="jstree-icon">&nbsp;</ins>1</a></li>
                        <li><a><ins class="jstree-icon">&nbsp;</ins>2</a></li>
                            </ul>
                            </li>
                    </ul>
                </div>
                <div style="display: table-cell;" class="jstree jstree-7 jstree-1">
                    <ul>
                        <li id="Li5" class="Root jstree-last jstree-open"><ins class="jstree-icon">&nbsp;</ins><a href="javascript:void(0)" class="Titleanchor"><ins class="jstree-icon">&nbsp;</ins>Title3</a>
                            <ul class="MenuContentholder">
                            <li><a><ins class="jstree-icon">&nbsp;</ins>1</a></li>
                        <li><a><ins class="jstree-icon">&nbsp;</ins>2</a></li>
                            </ul>
                            </li>
                    </ul>
                </div>
                <div style="display: table-cell;" class="jstree jstree-9 jstree-3">
                    <ul>
                        <li id="Li4" class="Root jstree-last jstree-open"><ins class="jstree-icon">&nbsp;</ins><a href="javascript:void(0)" class="Titleanchor"><ins class="jstree-icon">&nbsp;</ins>Title4</a>
                            <ul class="MenuContentholder">
                            <li><a><ins class="jstree-icon">&nbsp;</ins>1</a></li>
                        <li><a><ins class="jstree-icon">&nbsp;</ins>2</a></li>
                            </ul>
                            </li>
                    </ul>
                </div>
            </div>
        </ul>
    </div>
</div>

​

上面的html应该像这样转换。

         <div class="navbar navbar-inverse">
    <div class="navbar-inner">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
        <div class="nav-collapse collapse">
            <ul class="nav-pills SC-Topmenu nav">
                <li><a href="Index.html">Home </a></li>
                <li><a href="Index.html">Categorys </a>
                    <div>
                        <ul>
                            <h3>Title1</h3>
                             <li><a>1</a></li>
                             <li><a>2</a></li>

                        </ul>
                         <ul>
                            <h3>Title2</h3>
                             <li><a>1</a></li>
                             <li><a>2</a></li>

                        </ul>
                         <ul>
                            <h3>Title3</h3>
                             <li><a>1</a></li>
                             <li><a>2</a></li>

                        </ul>
                         <ul>
                            <h3>Title4</h3>
                             <li><a>1</a></li>
                             <li><a>2</a></li>

                        </ul>
                         <ul>
                            <h3>Title5</h3>
                             <li><a>1</a></li>
                             <li><a>2</a></li>

                        </ul>

                    </div>


                </li>
                </ul>
            </div>
        </div>
    </div>

所有的属性，所有的元素，到目前为止，我已经尝试过了，但是我还没完成，有一些问题，有人能帮我吗？

   $('.top-nav').each(function () {
        var container = $(this);
        //$(container).find('.custom-content').each(function () { var custom_content = $('.custom-content').html(); $(container).find('.MenuContentholder').append('<li><a href="javascript:void(0)">' + custom_content + '</a></li>'); });
        $(container).find('.jstree-icon').addClass('icon');
        $(container).wrap('<div></div>')
        $(container).wrap('<li></li>');
        $(container).find('.title').wrap('<a href="#" class="SC-Title"><a>');
        //$(container).find('.widget-controls').remove();
        $(container).find('.SC-Title').html($(container).find('.SC-Title').children().html());
        $(container).find('.Root').parent('ul').unwrap();
        $(container).find('.SC-Title').unwrap();
        //$(container).find('ul').parent('div').children('ul').unwrap();

        //$('.panel').remove();
        alert($('.' + Areaclassselector).html());
        $('.Titleanchor').each(function () {            
            $(this).html('<h3>' + $(this).html() + '</h3>');
            $(this).find('h3').unwrap();
        });
        $(container).find('ins').remove();

    });

Answer 1

我觉得自己很傻，但我真的为你这么做了。给你；

JSfiddle

JavaScript

$(document).ready(function() {
    var new_menu = '';

    $('.SC-Topmenu .top-nav').each(function() {
        var menuItem = $(this);
        var menuItemName = $('.title-bar div', this).html();

        new_menu += '<li><a href="Index.html">' + menuItemName + '</a>';

        counter = 0;

        $('[id^=Li]', this).each(function() {
            var subMenuItem1 = $(this);
            var subMenu1Name = $('.Titleanchor', this).html().split('</ins>')[1];
            var subMenu1Href = $()

            if (counter == 0) {
                new_menu += '<div>';
            }

            new_menu += '<ul>';
            new_menu += '<h3>' + subMenu1Name + '</h3>';

            $('ul li', this).each(function() {
                var subMenuItem2 = $(this);
                var subMenuItem2Name = $('a', this).html().split('</ins>')[1];

                new_menu += '<li><a>' + subMenuItem2Name + '</a></li>';
            });

            new_menu += '</ul>';

            if (counter == subMenuItem1.length - 2) {
                new_menu += '</div>';
                counter = 0;
            }

            counter++;
        });

        new_menu += '</li>';
    });

    $('.SC-Topmenu').html(new_menu);
});