Geek Answers Handbook

Move 2 DIVs (login link and trash) to the last item in a list using jQuery

I am trying to figure this out for mobile viewing. I want to move the div-div and cart-navigation div to the last item in the "Customer Support" section. Any help would be greatly appreciated.

<div id="account-navigation" class="utility-navigation">          
    <ul>
        <li id="account-menu"><a href="account/" id="MyAccountLink">LOGIN TO MY ACCOUNT</a></li>                        
    </ul>
</div>
<div id="cart-navigation" class="utility-navigation">
    <ul>
        <li><a href="/Cart" class="glyphicon glyphicon-shopping-cart"><span class="badge"></span></a></li>
    </ul>
</div>
<div class="main-navigation">
    <ul class="main-items">
        <li class="main-item"><a href="#">How to Qualify</a></li>
        <li class="main-item"><a href="#">Enroll</a></li>
        <li class="main-item"><a href="#">Customer SUpport</a></li>
    </ul>
</div>
+4
source share
2 answers

You can move them using the method appendTo:

$('#account-navigation, #cart-navigation').find('li').appendTo('.main-items');

Please note that it will leave #account-navigation uland #cart-navigation ulempty. Not sure if you want to completely remove them.

+1
source

div ul, nav li jQuery append() @dfsq :

$('#account-navigation, #cart-navigation').find('li').appendTo('.main-items')

, , , , " ", / -:

<ul class="main-items">
    <li class="main-item"><a href="#">How to Qualify</a></li>
    <li class="main-item"><a href="#">Enroll</a></li>
    <li class="main-item"><a href="#">Customer SUpport</a></li>
    <li class="main-item mobile-only"><a href="account/">LOGIN TO MY ACCOUNT</a></li>                        
    <li class="main-item mobile-only"><a href="/Cart" class="glyphicon glyphicon-shopping-cart"><span class="badge"></span></a></li>
</ul>

CSS

.mobile-only {
    display: none;
}
/* Just guessing. Your media queries will be different */
@media (max-width: 600px) {
  .mobile-only {
    display: block;
  }
}

:

.utility-navigation, .main-navigation {display:inline-block;}
.main-item {display:inline-block;}
ul {list-style:none; margin:0; padding:0;}
li {display:inline;}
li a {display:inline-block; background:#eee; padding:10px; text-align:center;}
li a:hover {background:#ccc;}
.mobile-only {display:none;}
@media (max-width:600px){
  .utility-navigation {display:none;}
  .main-navigation {display:block;}
  .main-item {display:block; margin-bottom:4px; padding:0;}  
  .main-item a {display:block;}
  .mobile-only {display:block;}
}
<h3>Resize me</h3>
<div id="account-navigation" class="utility-navigation">          
    <ul>
        <li id="account-menu"><a href="account/" id="MyAccountLink">LOGIN TO MY ACCOUNT</a></li>                        
    </ul>
</div>
<div id="cart-navigation" class="utility-navigation">
    <ul>
        <li><a href="/Cart" class="glyphicon glyphicon-shopping-cart"><span class="badge"></span>CART</a></li>
    </ul>
</div>
<div class="main-navigation">
    <ul class="main-items">
        <li class="main-item"><a href="#">How to Qualify</a></li>
        <li class="main-item"><a href="#">Enroll</a></li>
        <li class="main-item"><a href="#">Customer SUpport</a></li>
        <li class="main-item mobile-only"><a href="account/">LOGIN TO MY ACCOUNT</a></li>
        <li class="main-item mobile-only"><a href="/Cart" class="glyphicon glyphicon-shopping-cart"><span class="badge"></span>CART</a></li>
    </ul>
</div>
Hide result
+1

More articles:


All Articles