jQuery菜单UL LI插入

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，也不能只插入标签。 您将需要remove（）元素，并在该元素后面添加一个新列表。

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