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

Question

I am pretty new in JQuery and I have the following problem.

Into a page I have 2 menus implemented by 2 differents unordered list , something like these:

1) MENU 1 having 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 having 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>

So, for some reason in my page I need the 2 menus, but when the browser window is small (mainly when the website is showed into a smartphone) the second menu is not displayed (and it is ok) and I need to put the

element of the second menu into the first one (after its element).

So I have done something like this:

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

So by the resize() method I intercept when the browser window change size and so I obtain the actual window width.

Then, by $('#menu-language > li') , I retrieve the menuItems array containing all the

element (and the HTML content of these element) of the second menu.

Now if te actual width is less than 986 px I have to put the element

element retrieved as element of the menuItems array at the end of the first menu (the list having class="nav single-page-nav" )

How can I do this last operation?

Answer 1

Try utilizing .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")
        }
    }
});

Answer 2

这应该有效：

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

Answer 3

A short method:

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

A Demo

So, your code becomes:

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

Answer 4

I would not recommend you to copy items with javascript. Why don't you use CSS Media Queries and hide subitems like with a class mobile-hidden or mobile-visible ?

But to answer your question just created a demo here . Use the two buttons to demonstrate the resize.

First of all add an id to your menu 1, I've used menu-1 , then use these lines of code to copy Elements from menu-language to menu-1 :

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

and these one to copy them back:

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