How to add all li of existing ul to the bottom of another ul base on their css classes


Tags: javascript,jquery,html,css

Problem :

I'm making a site responsive and I need to merge two different menus. To do so I need to add all li of an ul to a different ul.

Here is a simplification of current markup I have:

<ul class="navigation-menu">
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

<ul class="nav-bar">
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

I need to add all li of nav-bar to the bottom of the list of ul with class navigation-menu and then prevent nav-bar from being displayed in the browser.

Here is my attempt:

$('ul.nav-bar li').each(function() {
   $(this).after('ul.nav-bar:last-child');
}

Not sure how to tackle this one. I'll appreciate if some one can point me in the right direction.



Solution :

you can use appendTo() which will add the items to the bottom of .navigation-menu:

$('ul.nav-bar li').each(function() {
  $(this).appendTo('ul.navigation-menu');
});

And you can use media queries to hide the other div at a certain screen width (although it will be "hidden" because it will be empty):

@media only screen and (max-width: 500px //example){
  .nav-bar{
    display: none;
  }
}

or JS if you prefer, but no reason to use JS when you can use CSS:

$('ul.nav-bar').hide();

FIDDLE

Update

As vladkras pointed out you can shorten the JS to simply be:

$('ul.nav-bar li').appendTo('ul.navigation-menu');

NEW FIDDLE


    CSS Howto..

    Show/Hide Html TR/TD

    How to put space between figure in image?

    How to have a different “placeholder style” and at the same time a different “text-input style” in Rails with CSS?

    How do you disable the set width of parent element for child element?

    How to locate Element via CSS Selector/XPath?

    How to set size of SVG image in :before pseudo-class?

    How to draw a border around a semitransparent image? (css) [duplicate]

    How to make one Div's position (not child or parent) completely linked / dependent on another Div's position?

    CSS: How to I exclude a DIV and its descendents?

    Something in my CSS is causing a random white bar to appear, how do I fix it?

    how to do conditional css on table row?

    How to keep animated gifs animated while scrolling on iOS devices?

    How to get CSS table-cell to 100% for responsive design [closed]

    Text Underline Showing Underline

    Showing an hidden element with an opacity-animation

    How can i make the responsive design using CSS?

    How to make this div using html and css?

    how to align an element but keep the space it left reserved

    How to emulate table cells with CSS (without float)?

    How to reload or rerender CSS for a single HTML element? [duplicate]

    How to add labels for multiple textboxes inside 1 li element

    CSS only - how to have a scrolling ul with all li on one line

    Bootstrap: user agent css styles misbehaving how to solve this

    How can I allow resizable() to increase size beyond initial size?

    Normalized CSS, option in JSFiddle, how to add it to document

    How to create uparrow downarrow using simple css

    How to force the horizontal scroll bar to appear?

    How to find an element using Watir by inline css styles

    How to implement this kind of blur effect?

    CSS - how to align different font-sizes to each other?