如何在其CSS类的基础上将现有ul的所有li添加到另一个ul的底部

Question

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.

Answer 1

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

Answer 2

Hello here is example Example

All you need is to clone list elements and append them after existing second menu :)

 $(function(){ var children = $(".nav-bar li").clone(); $(".navigation-menu").append(children); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="navigation-menu"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="nav-bar"> <li>4</li> <li>5</li> <li>6</li> </ul> 

And hide element for example on breakpoint 769px

@media screen and (max-width:769px){
    .nav-bar{
        display: none;
    }
}

Answer 3

var navBar = $('.nav-bar'),
    LIs = navBar.children('li');
$('.navigation-menu').append(LIs);
navBar.hide(); // or .remove() if you don't need it anymore

FIDDLE