CODEWITHSUNDEEP
javascriptjqueryhtmldomjquery-traversing
AndreaNobili
AndreaNobili

Reputation: 42957

How to put the retrieved <li> element of an unordered list at the end of another unordered list using JQuery?

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?

    Upvotes: 2

    Views: 88

    • Answers (4)

    ahmet2106
    ahmet2106

    Reputation: 5007

    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');

    Upvotes: 0

    lshettyl
    lshettyl

    Reputation: 8181

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

    Upvotes: 0

    GUL
    GUL

    Reputation: 1195

    This should work:

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

    Upvotes: 0

    guest271314
    guest271314

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

    Upvotes: 1

    Related Questions