jQuery的菜單UL李插入

Question

我通過在CMS菜單嵌入結合（不具有源代碼），所以這是菜單看起來像

<li class="dir dgn-root Item-2"> 
    <a href="#" title=""><span>Menu1</span></a><div class="mega_submenu Column2 Column3" style="display: none;"> 
<ul class="mega_submenu_ul"> 
    <li> 
     <ul> 
     <li class=" first-item SunItem-1"> 
     <a href="#" title="Templates"> 
      <span>Templates</span> 
     </a> 
     </li> 
     <li class=" SunItem-2"> 
      <a href="#" title="Questions and Answers"> 
      <span>Questions and Answers</span> 
      </a> 
     </li> 
     <li class=" SunItem-3"> 
      <a href="#" title="Template Package"> 
       <span>Template Package</span> 
      </a> 
     </li> 
     <li class=" SunItem-4"> 
      <a href="#" title="Silver Package"> 
       <span>Silver Package</span> 
      </a> 
     </li> 
    </ul> 
    </li> 
    <li> 
    <ul> 
     <li class=" SunItem-5"> 
      <a href="#" title="Gold Package"> 
       <span>Gold Package</span> 
      </a> 
     </li> 
     <li class=" SunItem-6"> 
      <a href="#" title="Platinum Package"> 
       <span>Platinum Package</span> 
      </a> 
     </li> 
     <li class=" SunItem-7"> 
      <a href="#" title="Features"> 
       <span>Features</span> 
      </a> 
     </li> 
     <li class=" last-item SunItem-8"> 
      <a href="#" title="Portfolio"> 
       <span>Portfolio</span> 
      </a> 
     </li> 
    </ul> 
    </li> 
    </ul> 
    </div> 
    </li> 

我需要嘗試什麼，做的是

這是它看起來像現在：

<li class=" last-item SunItem-8"><a href="#><span>Blah</span></a></li> 

但是我需要有jQuery的或在此之前的JavaScript插入一些HTML元素，所以它看起來像：

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

所以它看起來就像這樣：

</li></ul><li><ul><li class=" last-item SunItem-8"><a href="#><span>Blah</span></a></li> 

任何幫助表示讚賞，我已經試過

  $(document).ready(function(){ 
      $("img").before("<ul><li><b>Before</b></li></ul>"); 
     }); 

但是，這似乎並沒有工作，我也嘗試過這種

<script> 
    (function() { 
     var lastItem = $("li.SunItem-8"); 
     var currentList = lastItem.closest('ul'); 
     var newList = $("</ul></li><li><ul>"); 
     newList.insertAfter(currentList); 
     newList.append(lastItem); 
    })(); 
    </script> 

這似乎是重複的文本，並沒有像預期的那樣真正形成HTML標籤 - html一旦插入上面的腳本，輸出看起來就像這樣。

<li> 
    <ul> 
    <li class=" SunItem-5"> 
    <a href="http://gentex/website-packages/gold-package.aspx" title="Gold Package"> 
    <span>Gold Package</span> 
    </a> 
    </li> 
    <li class=" SunItem-6"> 
    <a href="http://gentex/website-packages/platinum-package.aspx" title="Platinum Package"> 
    <span>Platinum Package</span> 
    </a> 
    </li> 
    <li class=" SunItem-7"> 
    <a href="http://gentex/website-packages/cms-features.aspx" title="CMS Features"> 
    <span>CMS Features</span> 
    </a> 
    </li> 
    </ul> 
    <li> 
    <ul> 
    </ul> 
    <li class=" last-item SunItem-8"> 
    <a href="http://gentex/website-packages/portfolio.aspx" title="Portfolio"> 
    <span>Portfolio</span> 
    </a> 
    </li> 
    <li class=" SunItem-8"> 
    <a href="http://gentex/website-packages/portfolio.aspx" title="Portfolio"> 
    <span>Portfolio</span> 
    </a> 
    </li> 
    <li class=" last-item SunItem-8"> 
    <a href="http://gentex/website-packages/portfolio.aspx" title="Portfolio"> 
    <span>Portfolio</span> 
    </a> 
    </li> 
    </li> 
    </li> 

Answer 1

你不能使用html，你不能只插入標籤。您將需要刪除（）該元素並附加一個新的列表與該元素。

var lastItem = $("li.SunItem-8"); 
var parent = lastItem.parent(); 
lastItem.remove(); 
var newUL = $("<ul>").append(lastItem); 
parent.after(newUL);