使用jquery修改一个Dom元素？

Question

HI所有我有需要是modified..this一个html是我的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> 

所有属性的所有元素应该被删除到目前为止，我一直在尝试这个，但我没有打包得到完成了出来有一些isssues可以帮助我这里的任何人

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