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添加）
    • 鷗
    • 海鷹
  • 爬行動物
  • 魚
  • 哺乳動物（點擊這裏刪除）
    • 關於：哺乳動物（這應該通過jQuery添加）
    • 足動物（點擊這裏刪除）
    • 關於：兩足動物（這應該通過jQuery添加）
    • 猴子
    • 人類
    • 四足動物（這裏的鏈接刪除）
    • 關於：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' ,'#');