将div元素转换为ul？

Question

I've got the following code (a navigation tree):

<div class="tr">
        <div class="navigationl1">Preface, revisions, and safety
           <div class="navigationl2">
              Preface
              <div class="navigationl3">
                 <div class="navigationl4">
                    <div class="navigationl5">
                       <div class="documenttitle">Service documentation</div>
                       <div class="documenttitle">About this documentation</div>
                       <div class="documenttitle">About this product</div>
                       <div class="documenttitle">Training</div>
                       <div class="documenttitle">Trademarks</div>
                       <div class="documenttitle">Contact</div>
                       <div class="documenttitle">Feedback</div>
                     </div>
                  </div>
               </div>
            </div>
        </div>  
          <div class="navigationl2">Revisions
              <div class="navigationl3">Service documentation
                 <div class="navigationl4">
                    <div class="navigationl5">
                       <div class="documenttitle">Version 1.0</div>
                    </div>
                 </div>
                 <div class="navigationl4">Revision history
                    <div class="navigationl5">
                       <div class="documenttitle">Version 0.0</div>
                    </div>
                 </div>
              </div>
           </div>

I would like to transform this div elements into li elements of an ul, by keeping the structure.

I made this jquery code from various topics on this forum, but it does not work at all:

 jQuery.fn.closestPrev = function(selector) { var current = $(this); var abort = false; while (!abort) { if (current.prev().length == 0) { abort = true; current = $([]); } else { current = current.prev(); if (current.is(selector)) { abort = true; } } } return current; }; $(".tr").find(".navigationl1.navigationl2.navigationl3.navigationl4.navigationl5.documenttitle:eq(1)").wrapInner("<div class='wrapingClass'></div>") ; $(".tr").find(".wrapingClass").unwrapUntil(7).wrap("<li class='LiClass'><ul><li><ul><li><ul><li><ul><li></li></ul></li></ul></li></ul></ul></li></li>"); $(".tr").wrapInner("<ul id='org'></ul>"); i = 0; $('.LiClass').closestPrev('a').each(function(){ FirstA = $(this).first(); $('.LiClass:eq('+i+') li:eq(1)').prepend(FirstA); i++ ; }); i = 0; $('.LiClass').closestPrev('a').each(function(){ FirstA = $(this).first(); $('.LiClass:eq('+i+')').prepend(FirstA); i++ ; }); 

Do you know what is wrong with this code and why the div are not turned into ul/li ?

Here's the JSFiddle: http://jsfiddle.net/0m8bxp65/2/

Thanks a lot in advance !

Answer 1

I found this info on the console when running JSFiddle :)

 crbsrv.jsfiddle.net/ads/CKYIEKQ7.json?segment=placement:jsfiddlenet&callback=_carbonads_go:1 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT 7Refused to execute script from '<URL>' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. fiddle.jshell.net/0m8bxp65/2/show/:1 Refused to execute script from 'https://raw.githubusercontent.com/jamesallardice/jquery.unwrapuntil/master/jquery.unwrapUntil.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. (index):1 Refused to execute script from 'https://raw.githubusercontent.com/jamesallardice/jquery.unwrapuntil/master/jquery.unwrapUntil.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. (index):1 Refused to execute script from 'https://raw.githubusercontent.com/jamesallardice/jquery.unwrapuntil/master/jquery.unwrapUntil.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. (index):1 Refused to execute script from 'https://raw.githubusercontent.com/jamesallardice/jquery.unwrapuntil/master/jquery.unwrapUntil.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. (index):1 Refused to execute script from 'https://raw.githubusercontent.com/jamesallardice/jquery.unwrapuntil/master/jquery.unwrapUntil.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. (index):1 Refused to execute script from 'https://raw.githubusercontent.com/jamesallardice/jquery.unwrapuntil/master/jquery.unwrapUntil.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. (index):1 Refused to execute script from 'https://raw.githubusercontent.com/jamesallardice/jquery.unwrapuntil/master/jquery.unwrapUntil.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. (index):54 Uncaught TypeError: $(...).find(...).unwrapUntil is not a function at (index):54 at dispatch (jquery-1.9.1.js:3074) at elemData.handle (jquery-1.9.1.js:2750) 

And the output I would like to get would be something like this:

 <ul class="tr"> <li class="navigationl1">Preface, revisions, and safety <li class="navigationl2">Preface <li class="navigationl3"> <li class="navigationl4"> <li class="navigationl5"> <li class="documenttitle">Service documentation</li> <li class="documenttitle">About this documentation</li> <li class="documenttitle">About this product</li> <li class="documenttitle">Training</li> <li class="documenttitle">Trademarks</li> <li class="documenttitle">Contact</li> <li class="documenttitle">Feedback</li> </li> </li> </li> </li> </li> <li class="navigationl2">Revisions <li class="navigationl3">Service documentation <li class="navigationl4"> <li class="navigationl5"> <li class="documenttitle">Version 1.0</li> </li> </li> <li class="navigationl4">Revision history <li class="navigationl5"> <li class="documenttitle">Version 0.0</li> </li> </li> </li> </li> </li> 

I am not sure how multiple levels of li can be nested in an ul though.