So entfernen Sie den Link von allen übergeordneten Elementen und klonen sie als untergeordnete Elemente

Question

Da mobile Geräte keinen Hover-Status haben, versuche ich, die Hyperlinks auf den ersten il-Elementen jedes Mal zu entfernen, wenn diese untergeordnete Elemente haben, und klonen sie als Kinder von sich selbst (mit Link).

<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> 

Und ich möchte das gleiche in dem Fußzeile Menü tun:

<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> 

ich auf einer Wordpress-Website diese HTML-Struktur durch php bin zu erzeugen, damit ich Element-IDs versuchen zu vermeiden.

Ich versuche dieses jQuery-Skript, aber es klont beide Li auf beide Menüs (Kopf- und Fußzeile), so dass ich am Ende mit zwei Klonen von jedem, einem in jedem Menü.

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(); 
    }); 
} 

Könnte mir eine Hand geben?

Answer 1

Ok, hab es. Ich brauchte nur den richtigen Platz, um den geklonten Li anzuhängen.

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(); 
    }); 
}