如何從所有父元素中刪除鏈接並將它們作爲子元素克隆它們

Question

由於移動設備沒有懸停狀態，因此我試圖在每次有子節點時刪除第一個il元素上的鏈接，並將它們克隆作爲自己的孩子（與鏈接）。

<ul id="menu-header-menu"> 

    <!--this li has children so link should be removed --> 
    <li class="menu-item-has-children"><a href="http://url.com/porfolio">Portfolio</a> 
     <ul class="sub-menu"> 
      <li><a href="http://url.com/paint">Painting</a></li> 
      <li><a href="http://url.com/vid">Video</a></li> 

     </ul> 
    </li> 

    <!--this li doesn't have children so link should NOT be removed --> 
    <li><a href="http://url.com/about">About</a></li> 
</ul> 

我希望做同樣的頁腳菜單：

<ul id="menu-footer-menu"> 

    <!--this li has children so link should be removed --> 
    <li class="menu-item-has-children"><a href="http://url.com/links">Links</a> 
     <ul class="sub-menu"> 
      <li><a href="http://url.com/doc">Documents</a></li> 
      <li><a href="http://url.com/ext">Extra</a></li> 
      <li><a href="http://url.com/photo">Photos</a></li> 
     </ul> 
    </li> 

    <!--this li doesn't have children so link should NOT be removed --> 
    <li><a href="http://url.com/contact/">Contact</a></li> 
</ul> 

我上一個WordPress網站產生通過PHP這個網站的結構，所以我儘量避免元素的ID。

我正在嘗試這個jQuery腳本，但它將兩個li都克隆到兩個菜單（頁眉和頁腳），所以我最終得到了每個菜單中的兩個克隆。

if($(window).width() <= 980){ 
    $('ul#menu-footer-menu').each(function() { 
     $(this).find('a:first').clone().appendTo("ul.sub-menu"); 
     $(this).find('a:first').contents().unwrap(); 
    }); 
    $('ul#menu-header-menu').each(function() { 
     $(this).find('a:first').clone().appendTo("ul.sub-menu"); 
     $(this).find('a:first').contents().unwrap(); 
    }); 
} 

可以幫我一把嗎？

Answer 1

好吧，明白了。我只需要把目標放在正確的位置來追加克隆的li。

if($(window).width() <= 980){ 
    $('ul#menu-footer-menu').each(function() { 
     $(this).find('a:first').clone().appendTo("ul#menu-footer-menu > li.menu-item-has-children > ul.sub-menu"); 
     $(this).find('a:first').contents().unwrap(); 
    }); 
    $('ul#menu-header-menu').each(function() { 
     $(this).find('a:first').clone().appendTo("ul#menu-header-menu > li.menu-item-has-children > ul.sub-menu"); 
     $(this).find('a:first').contents().unwrap(); 
    }); 
}