javascript - 如何使用 JQuery 将检索到的无序列表的 <li> 元素放在另一个无序列表的末尾？

Question

我是 JQuery 的新手，我遇到了以下问题。

在一个页面中，我有 2 个菜单，由 2 个不同的无序列表实现，如下所示:

1) MENU 1 具有 class="nav single-page-nav":

<ul class="nav single-page-nav">
    <li>
        <a href="http://localhost/onyx/#section-45">Chi siamo</a>
    </li>
    <li>
        <a href="http://localhost/onyx/#section-27">Servizi</a>
    </li>
    <li>
        <a href="http://localhost/onyx/#section-174">Aggiornamenti</a>
    </li>
    <li>
        <a href="http://localhost/onyx/#section-121">Contattaci</a>
    </li>
</ul>

2) MENU 2 有class=nav

<ul id="menu-language" class="nav">
    <li id="menu-item-422" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-422">
        <a href="http://localhost/onyx/prova/">prova cat</a>
    </li>

    <li id="menu-item-185" class="qtranxs-lang-menu qtranxs-lang-menu-it menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-185">
        ..............................
        SOMETHING
        ..............................
    </li>
</ul>

因此，出于某种原因，在我的页面中我需要两个菜单，但是当浏览器窗口很小时(主要是当网站显示在智能手机中时)第二个菜单不显示(没问题)，我需要将第二个菜单的

元素放入第一个菜单(在其元素之后)。

所以我做了这样的事情:

jQuery(document).ready(function($){
   ............................................
   ............................................
   ............................................

$(window).resize(function() {
    //alert("INTO resize")

    windowWidthResized = $(window).width();
    //alert(windowWidthResized);
    console.log("WINDOWS WIDTH: " + windowWidthResized);

    menuItems = new Array();
    menuItems = $('#menu-language > li');
    console.log("NUMBER OF ITEMS IN SECOND MENU: " + menuItems.length);

    /*
    $('#menu-language > li').each(function() {
        console.log($(this).html());
        //alert($(this).html());
    });
    */

    if(windowWidthResized <= 986) {
        console.log("INSERT MENU 2 ITEMS AT THE END OF MENU 1");
    }
});

});

因此，通过 resize() 方法，我在浏览器窗口更改大小时进行拦截，从而获得实际的窗口宽度。

然后，通过 $('#menu-language > li')，我检索了包含所有

menuItems 数组>

第二个菜单的元素(以及这些元素的 HTML 内容)。

现在，如果实际宽度小于 986 像素，我必须将元素

元素作为 menuItems 第一个菜单末尾的数组( 列表有 class="nav single-page-nav")

我怎样才能完成最后的操作？

Answer 1

尝试使用 .appendTo

$(window).resize(function() {
    //alert("INTO resize")

    windowWidthResized = $(window).width();
    //alert(windowWidthResized);
    console.log("WINDOWS WIDTH: " + windowWidthResized);
    var menuItems = $("#menu-language > li");
    console.log("NUMBER OF ITEMS IN SECOND MENU: " + menuItems.length);

    if(windowWidthResized <= 986) {
        console.log("INSERT MENU 2 ITEMS AT THE END OF MENU 1");
        menuItems.appendTo(".single-page-nav")
    } else {
        // if `li` within `#menu-language` already appended to
        // `.single-page-nav` append `#menu-language li`
        if ($("#menu-language > li").length === 0) {
          $(".single-page-nav li:gt(3)").appendTo("#menu-language")
        }
    }
});