Question

所以我有以下内容：

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

但是我需要让Jquery在此之前插入一些HTML元素，所以它看起来像：

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

所以看起来像这样：

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

感谢任何帮助

这里有更多的上下文 - 我被嵌入在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>

您将看到我正在尝试添加更多HTML，这将在巨型菜单的右侧创建一个新菜单。

Answer 1

你正在思考标记，但是当你与结构交互时，它不再是标记，它是一个DOM结构。

您想要做的就是在现有ul之后开始新的ul并将li移入其中。如果是这样的话：

var lastItem = $("li.last-item");
var currentList = lastItem.closest('ul');
var newList = $("<ul>");
newList.insertAfter(currentList);
newList.append(lastItem);

Live Example | Source

Jquery：在元素之前插入HTML

1 个答案: