如何從所有父元素中刪除鏈接並將其克隆為子元素

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生成此html結構，因此我試圖避免使用元素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();
    });
}