JQuery обернуть вокруг первой глубины li's

Question

Я пытаюсь заставить работать некоторый код jQuery для меню .. Мне нужно обернуть <ul> вокруг моей первой глубины <li> s

Мой синтаксис HTML выглядит следующим образом ..

<ul>
  <li id="" class="menu-item">
     <a class="" href="#">test1</a>

    <div class="sub">
         <ul class="sub-menu">
              <li id="" class="menu-item">
                  <a class="" href="#">test2</a>
                  <ul class="sub-menu">
                      <li id="" class="menu-item"><a class="" href="">test</a></li>
                      <li id="" class="menu-item"><a class="" href="">test</a></li>
                  </ul>
              </li>   
              <li id="" class="menu-item">
                  <a class="" href="#">test3</a>
                  <ul class="sub-menu">
                      <li id="" class="menu-item"><a class="" href="">test</a></li>
                      <li id="" class="menu-item"><a class="" href="">test</a></li>
                  </ul>
               </li>    
          </ul>
     </div>
  </li>
</ul>

Вот так это должно выглядеть после вставки тегов <ul>

 <ul>
      <li id="" class="menu-item">
         <a class="" href="#">test1</a>

        <div class="sub">
             <ul class="sub-menu">
                  <ul class="drop_menu">
                  <li id="" class="menu-item">
                      <a class="" href="#">test2</a>
                      <ul class="sub-menu">
                          <li id="" class="menu-item"><a class="" href="">test</a></li>
                          <li id="" class="menu-item"><a class="" href="">test</a></li>
                      </ul>
                  </li> 
                  </ul>  
                  <ul class="drop_menu">
                  <li id="" class="menu-item">
                      <a class="" href="#">test3</a>
                      <ul class="sub-menu">
                          <li id="" class="menu-item"><a class="" href="">test</a></li>
                          <li id="" class="menu-item"><a class="" href="">test</a></li>
                      </ul>
                   </li>
                   </ul>    
              </ul>
         </div>
      </li>
    </ul>

<ul class="drop_menu"> следует обернуть только вокруг li первого уровня ... Не нашеллюбое решение для этого до сих пор .. Надеюсь, у кого-нибудь есть идея ..

Ура!

Answer 1

, если оборачиваемся вокруг 1-го уровня li, то:

$ ('ul.drop_menu> li'). Each (function () { // сделать что-то в каждом li, используя это });

Answer 2

Вы хотите выбрать все li s напрямую внутри <div> s <ul>:

$('ul > li.menu-item > div.sub > ul.sub-menu > li.menu-item')

a > b дочерний селектор выберет все b элементы, которые являются прямым потомком a.

---

EDIT : Вы также ищете метод .unwrap().

Answer 3

Следующий jQuery должен сделать свое дело ...

$('div.sub > ul.sub-menu > li.menu-item').wrap('<ul class="drop_menu"></ul>');