Question

我有以下代码（导航树）：

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

我想通过保留结构将div元素转换为ul的li元素。

我在该论坛的各个主题中制作了这个jquery代码，但是根本无法使用：

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

您知道这段代码有什么问题，为什么div不能转换为ul / li吗？

这是JSFiddle：http://jsfiddle.net/0m8bxp65/2/

非常感谢！

Answer 1

我在运行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)

我想要的输出将是这样的：

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

我不确定ul中可以嵌套多少级li。

将div元素转换为ul？

1 个答案: