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

【问题标题】：How to put the retrieved <li> element of an unordered list at the end of another unordered list using JQuery?如何使用 JQuery 将检索到的无序列表的 <li> 元素放在另一个无序列表的末尾？
【发布时间】：2015-08-02 00:15:01
【问题描述】：

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

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

1) 菜单 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) 菜单 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>

所以，出于某种原因，在我的页面中我需要 2 个菜单，但是当浏览器窗口很小时（主要是网站显示在智能手机中时），第二个菜单不显示（没关系），我需要将第二个菜单的

元素放入第一个菜单（在其元素之后）。

所以我做了这样的事情：

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" 的列表）

我该如何做最后一个操作？

【问题讨论】：

标签： javascript jquery html dom jquery-traversing

【解决方案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")
        }
    }
});

【讨论】：

【解决方案2】：

这应该可行：

$(".single-page-nav").append($("#menu-language").html());

【讨论】：

【解决方案3】：

一个简短的方法：

$("#menu-language").children().detach().//detach the LIs
appendTo("ul.single-page-nav"); //append

A Demo

所以，你的代码变成了：

$(window).resize(function() {

    if($(window).width() <= 986) {
        if ($("#menu-language > li").length) {
            $("#menu-language > li").detach().appendTo("ul.single-page-nav");
        }
    //If you want to reset when the width is more than 986
    } else {
        $("ul.single-page-nav > li").slice(-2).appendTo("#menu-language");
    }
});

【讨论】：

【解决方案4】：

我不建议您使用 javascript 复制项目。为什么不使用 CSS 媒体查询并隐藏子项，例如 mobile-hidden 或 mobile-visible 类？

但要回答您的问题，只需创建一个演示 here。使用这两个按钮来演示调整大小。

首先在你的菜单中添加一个id 1，我用过menu-1，然后使用这几行代码将元素从menu-language复制到menu-1：

var $menuItems = $('#menu-language > li');
$menuItems.addClass('js-menu-1').appendTo('#menu-1');

然后把这些复制回来：

var $menuItems = $('#menu-1 > li.js-menu-1');
$menuItems.removeClass('js-menu-1').appendTo('#menu-language');

【讨论】：