jQuery: Клонировать ссылки в подменю

Question

У меня есть огромная навигация с несколькими раскрывающимися меню. На сенсорных устройствах я хочу отключить все ссылки на узле и клонировать эти ссылки в качестве первых дочерних элементов в свои подменю.

Следующий код отлично подходит для первого уровня, но он также должен работать с глубоко вложенными меню. Может ли кто-нибудь помочь?

$('nav > ul > li > a').each(function(index, value) { 
 
    $("nav > ul > li.has-sub-menu:nth-child(" + index + ") > a") 
 
    .clone() 
 
    .insertBefore(".has-sub-menu:nth-child(" + index + ") > ul > li:first-child") 
 
    .wrap('<li></li>') 
 
    .prepend("About: "); 
 
}); 
 

 
$('.has-sub-menu > a').removeAttr('href', '#');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<nav class="site-nav"> 
 
    <ul> 
 
    <li class="has-sub-menu"><a href="http://some-link.io">Animals</a> 
 
     <ul class="sub-menu"> 
 
     <li class="has-sub-menu"><a href="http://some-link.io">Birds</a> 
 
      <ul class="sub-menu"> 
 
      <li class="has-sub-menu"><a href="http://some-link.io">Seabirds</a> 
 
       <ul class="sub-menu"> 
 
       <li> 
 
        <a href="http://some-link.io">Gull</a> 
 
       </li> 
 
       <li> 
 
        <a href="http://some-link.io">Sea Eagle</a> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="http://some-link.io">Reptiles</a> 
 
     </li> 
 
     <li> 
 
      <a href="http://some-link.io">Fishes</a> 
 
     </li> 
 
     <li class="has-sub-menu"> 
 
      <a href="http://some-link.io">Mammals</a> 
 
      <ul class="sub-menu"> 
 
      <li class="has-sub-menu"> 
 
       <a href="http://some-link.io">Bipeds</a> 
 
       <ul class="sub-menu"> 
 
       <li> 
 
        <a href="http://some-link.io">Monkeys</a> 
 
       </li> 
 
       <li> 
 
        <a href="http://some-link.io">Humans</a> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      <li class="has-sub-menu"> 
 
       <a href="http://some-link.io">Quadruped</a> 
 
       <ul class="sub-menu"> 
 
       <li><a href="http://some-link.io">Dogs</a> 
 
       </li> 
 
       <li><a href="http://some-link.io">Cats</a> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="http://some-link.io">Amphibians</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li class="has-sub-menu current-menu-item"> 
 
     <a href="http://some-link.io">Cars</a> 
 
     <ul class="sub-menu"> 
 
     <li class="has-sub-menu"> 
 
      <a href="http://some-link.io">European-Cars</a> 
 
      <ul class="sub-menu"> 
 
      <li class="has-sub-menu"> 
 
       <a href="http://some-link.io">German Cars</a> 
 
       <ul class="sub-menu"> 
 
       <li> 
 
        <a href="http://some-link.io">Volkswagen</a> 
 
       </li> 
 
       <li> 
 
        <a href="http://some-link.io">Porsche</a> 
 
       </li> 
 
       <li> 
 
        <a href="http://some-link.io">Merzedes Benz</a> 
 
       </li> 
 
       <li> 
 
        <a href="http://some-link.io">Audi</a> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      <li> 
 
       <a href="http://some-link.io">Dutch Cars</a> 
 
      </li> 
 
      <li> 
 
       <a href="http://some-link.io">Belgian Cars</a> 
 
      </li> 
 
      <li class="has-sub-menu"> 
 
       <a href="http://some-link.io">Italian Cards</a> 
 
       <ul class="sub-menu"> 
 
       <li> 
 
        <a href="http://some-link.io">Ferrari</a> 
 
       </li> 
 
       <li> 
 
        <a href="http://some-link.io">Fiat</a> 
 
       </li> 
 
       <li> 
 
        <a href="http://some-link.io">Alfa Romeo</a> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li class="has-sub-menu"> 
 
      <a href="http://some-link.io">Asian Cards</a> 
 
      <ul class="sub-menu"> 
 
      <li class="has-sub-menu"> 
 
       <a href="http://some-link.io">Japanese Cars</a> 
 
       <ul class="sub-menu"> 
 
       <li> 
 
        <a href="http://some-link.io">Toyota</a> 
 
       </li> 
 
       <li> 
 
        <a href="http://some-link.io">Mazda</a> 
 
       </li> 
 
       <li> 
 
        <a href="http://some-link.io">Honda</a> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li class="has-sub-menu"> 
 
      <a href="http://some-link.io">US Cars</a> 
 
      <ul class="sub-menu"> 
 
      <li> 
 
       <a href="http://some-link.io">Ford</a> 
 
      </li> 
 
      <li> 
 
       <a href="http://some-link.io">Jeep</a> 
 
      </li> 
 
      <li> 
 
       <a href="http://some-link.io">Dodge</a> 
 
      </li> 
 
      <li> 
 
       <a href="http://some-link.io">Buick</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li class="has-sub-menu"> 
 
      <a href="http://some-link.io">African Cars</a> 
 
      <ul class="sub-menu"> 
 
      <li> 
 
       <a href="http://some-link.io">Ramses</a> 
 
      </li> 
 
      <li> 
 
       <a href="http://some-link.io">Tarantula</a> 
 
      </li> 
 
      <li> 
 
       <a href="http://some-link.io">Birkin</a> 
 
      </li> 
 
      <li> 
 
       <a href="http://some-link.io">Ranger</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="http://some-link.io">Australian Cars</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <a href="http://some-link.io">Drinks</a> 
 
    </li> 
 
    <li> 
 
     <a href="http://some-link.io">Cigaretts</a> 
 
    </li> 
 
    <li class="has-sub-menu"> 
 
     <a href="http://some-link.io">Colors</a> 
 
     <ul class="sub-menu sub-menu-left"> 
 
     <li> 
 
      <a href="http://some-link.io">Red</a> 
 
     </li> 
 
     <li> 
 
      <a href="http://some-link.io">Yellow</a> 
 
     </li> 
 
     <li> 
 
      <a href="http://some-link.io">Green</a> 
 
     </li> 
 
     <li> 
 
      <a href="http://some-link.io">Blue</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

Мой желаемый strukture выглядит следующим образом:

• Животные (ссылка удалена здесь)
  • О: Животные (это один должен быть добавлен с помощью JQuery)
  • Птицы (ссылка удалена здесь)
    • О: Птицы (это один должен быть добавлен с помощью JQuery)
    • птиц (ссылка удалена здесь)
    • О: Морские птицы (это один должен быть добавлен с помощью JQuery)
    • Галл
    • Sea Eagle
  • Рептилии
  • Рыбки
  • Млекопитающие (ссылка удалена здесь)
    • О: Млекопитающие (это один должен быть добавлен с помощью JQuery)
    • двуногих (ссылка удалена здесь)
    • О: двуногих (это один должен быть добавлен с помощью JQuery)
    • Monkeys
    • Люди
    • четвероногое (ссылка удалена здесь)
    • О: Quadrupted (это один должен быть добавлен с помощью JQuery)
    • Собаки
    • Кошки
  • Амфибии

...

Answer 1

Следующий код прекрасно работает для меня.

$(".sub-menu > li:first-child").each(function(){ 
    var parent = $(this).parent('ul').parent('.has-sub-menu'); 
    var copy = parent.clone(); 
    $(copy).removeClass("has-sub-menu").find(".sub-menu").remove(); 
    $(copy).prepend('Über: ');  
    $(this).before(copy); 
}); 

$('.has-sub-menu > a').attr('href' ,'#');