We Keep Coding

How to pass all li from unorder list to div except clicked li

I have list item
<ul class="menu">
<li> LIST 1 </li>
<li> LIST 2 </li>
<li> LIST 3 </li>
</ul>
<div class="append_li"></div>
So suppose when I click on <li>LIST 1</li> remaining li with tags should get appended in div tag but not clicked li, so how to do this using jQuery

You can use jQuery .clone() for this purpose:
$(document).ready(function(){
$('li').click(function(){
//$('.append_li').html('');
$('.append_li').html($('li').not($(this)).clone());
});
});
Working snippet:
$(document).ready(function(){
$('li').click(function(){
//$('.append_li').html('');
$('.append_li').html($('li').not($(this)).clone());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li> LIST 1 </li>
<li> LIST 2 </li>
<li> LIST 3 </li>
</ul>
<div class="append_li"></div>
Note: If you want to replace data inside <div> instead of append, then add below line in your code before .clone() line
$('.append_li').html('');
Important:- What every-one talks about invalid HTML, You can overcome to that problem by doing below code:
$(document).ready(function(){
$('li').click(function(){
$('.append_li').html('');
$('.append_li').html($("ul.menu").clone().find('li:eq('+ $(this).index() +')').remove().end());
})
})
Output: http://jsfiddle.net/0mz9s8ng/

You can use like this:
$('.menu li').click(function (){
$(this).siblings('li').clone().appendTo('.append_li')
});
OR Like this
$('.menu li').click(function (){
$(this).siblings('li').appendTo('.append_li')
});

Change div content and url on single click using jquery

I am very new to jquery.
I just need to update div content and link url on single click.
here I am working on this code.
<ul>
<li>$14.50</li>
<li>$15.50</li>
<li>$16.50</li>
<li>$20.50</li>
</ul>
I need to update price div based on above link click.
<div class="price">$0.00</div>
<a class="buy" href="">Pay Now</a>
Thanks

You can try something like"
$(".price").on('click', function(){
var clickedPrice = $(this).data('price');
$('#result_price').html("$" + clickedPrice);
});
<ul>
<li class="price">$9</li>
<li class="price">$5</li>
<li class="price">$3</li>
</ul>
<div id="result_price">$0</div>

Use .class selector and .attr() to change the href.
$('ul > li').click(function(){
$('.price').html($(this).text());
$('.buy').attr('href', 'http://google.com');
});
$('ul > li').click(function(){
$('.price').html($(this).text());
$('.buy').attr('href', 'http://google.com');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>$14.50</li>
<li>$15.50</li>
<li>$16.50</li>
<li>$20.50</li>
</ul>
<div class="price">$0.00</div>
<a class="buy" href="">Pay Now</a>

You can update price div based on ul > li > a click. Try below code
$(document).on('click', 'ul > li > a', function(){
$('.price').text($(this).text());
});
$(document).on('click', 'ul > li > a', function(){
$('.price').text($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>$14.50</li>
<li>$15.50</li>
<li>$16.50</li>
<li>$20.50</li>
</ul>
<div class="price">$0.00</div>
<a class="buy" href="">Pay Now</a>
Thank you.

CSS class not applying in the node

I am trying to add and remove class using the following script to #menuElem tag:
<script type="text/javascript">
$('#menuElem li ul').each(function (){
$(this).addClass("fallback browse-experience-drop-down-width");
});
$('#menuElem li a').each(function (){
$(this).addClass("skew");
});
$('#menuElem li ul li a').each(function (){
$(this).removeClass("skew");
});
</script>
Ideally this should work, but not working, Can someone help?
See below the HTML that we are adding the class, you can find menuElem inside the HTML
<!-- Header zone -->
<!-- header -->
<div class="tenantHeade fs-headerfooter-widget">
<!---->
<header>
<div id="container" class="container">
<div class="logocont">website</div>
<!-- Mobile nav btn -->
<a class="nav-toggle" href="javascript:void(0);"><span class="ada-compliant visible-xs"></span></a>
<!-- Mobile user options (for anon and preferred visitors) -->
<a href="javascript:void(0);" class="member-toggle">
<span class="ada-compliant visible-xs"></span>
</a>
<!-- Main nav -->
<nav class="main-nav inactive">
<ul id="menuElem">
<li>
<span class="antiskew">Browse Experiences</span>
<ul>
<li>
website
</li>
<li>
Local
</li>
<li>
Voluntours
</li>
<li>
Welcome website
</li>
</ul>
</li>
<li>
<span class="antiskew">Become a Member</span>
</li>
<li>
<span class="antiskew">Daily Deals</span>
</li>
</ul>

$(document).ready(function() {
$('#menuElem>li>ul').addClass("fallback browse-experience-drop-down-width");
$('#menuElem>li>a').addClass("skew");
$('#menuElem>li>ul>li>a').removeClass("skew");
});

$(document).ready(function () {
$('#menuElem li ul').each(function () {
$(this).addClass("fallback browse-experience-drop-down-width");
});
$('#menuElem li a').each(function () {
$(this).addClass("skew");
});
$('#menuElem li ul li a').each(function () {
$(this).removeClass("skew");
});
});

jQuery sliding menu function

hi i have a unordered list menu, trying to make the sub-items slide down and up on clicking at the main items, i wrote a jQuery code that works but when click at open menu it close it and open again, but i was hoping it will just close it.
html
<div class="menuNav">
<ul>
<li><span>item_1</span>
<ul>
<li>sub-item_1-1</li>
<li>sub-item_1-2</li>
<li>sub-item_1-3</li>
<li>sub-item_1-4</li>
</ul>
</li>
<li><span>item_2</span>
<ul>
<li>sub-item_2-1</li>
<li>sub-item_2-2</li>
<li>sub-item_2-3</li>
<li>sub-item_2-4</li>
</ul>
</li>
<li><span>item_3</span>
<ul>
<li>sub-item_3-1</li>
<li>sub-item_3-2</li>
<li>sub-item_3-3</li>
<li>sub-item_3-4</li>
</ul>
</li>
</ul>
</div>
jQuery
$(document).ready(function() {
$('.menuNav ul li').click(function(){
$(this).parent().find('ul').slideUp("fast");
$(this).parent().find("li").removeClass('menuactive');
$(this).find('ul').slideDown("slow");
$(this).addClass('menuactive');
});
$('.menuNav ul .menuactive').click(function(){
$(this).parent().find('ul').slideUp("fast");
});
});

If the li has a class menuactive, call the slideUp() function and remove the class menuactive else call the slideUp() function on all uls, remove the class menuactive from all lis, call slideDown() on the one that was clicked and add the class menuactive to the one that was clicked.
$(document).ready(function() {
$('ul > li > ul').hide();
$('.menuNav > ul > li').click(function() {
if ($(this).hasClass('menuactive')) {
$(this).find('ul').slideUp('fast');
$(this).removeClass('menuactive');
} else {
$(this).siblings().find('ul').slideUp('fast');
$(this).siblings().removeClass('menuactive');
$(this).find('ul').slideDown('fast');
$(this).addClass('menuactive');
}
});
});
.menuactive {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="menuNav">
<ul>
<li><span>item_1</span>
<ul>
<li>sub-item_1-1</li>
<li>sub-item_1-2</li>
<li>sub-item_1-3</li>
<li>sub-item_1-4</li>
</ul>
</li>
<li><span>item_2</span>
<ul>
<li>sub-item_2-1</li>
<li>sub-item_2-2</li>
<li>sub-item_2-3</li>
<li>sub-item_2-4</li>
</ul>
</li>
<li><span>item_3</span>
<ul>
<li>sub-item_3-1</li>
<li>sub-item_3-2</li>
<li>sub-item_3-3</li>
<li>sub-item_3-4</li>
</ul>
</li>
</ul>
</div>

Keep the parent menu highlighted when I click on its child menu

I want to implement a menu in my website.
I need to highlight a parent menu while I click on its child menu.
When I click on the parent menu, it is highlighted. But when I click on the child menu then its parent is not highlighted.
Here is my code. Please help me.
<html>
<head>
<script>
$(document).ready(function(){
$(' #menu-wplook-main-menu').find('li a').click(function(){
$(' #menu-wplook-main-menu').find('li a').removeClass('active');
if($(this).closest('ul').hasClass('sub-menu')){
$(this).parents('li ').addClass('active');
//this is a parent element
}else{
$(this).addClass('active');
}
});
});
</script>
<style>
#menu-wplook-main-menu li a.active{
color:#e53b51;
}
</style>
</head>
<body>
<script src="js/base.js"></script>
<div class="wrapper">
<p class="site-title"><img src="images/logo/iab_logo.png" alt="Indian Association for the Blind" title="Indian Association for the Blind"></p>
<nav class="navigation"id="nav">
<ul id="menu-wplook-main-menu"class="parent" >
<li class="menu-item">WHO WE ARE
<ul class="sub-menu"id="sub-menu1">
<li class="sub-menu-item1"id="sub-menu-item1">ABOUT FOUNDER</li>
<li class="sub-menu-item2">ABOUT IAB</li>
<!--<li class="menu-item ">TEAM IAB</li>-->
</ul>
</li>
<li class="menu-item current">WHAT WE DO
<ul class="sub-menu"id="sub-menu2">
<li class="sub-menu-item3 ">EDUCATION</li>
<li class="sub-menu-item4">CAREER & SKILL TRAINING</li>
<li class="sub-menu-item5">RESIDENTIAL SERVICES</li>
<li class="sub-menu-item6">SUPPORT SERVICES</li>
<li class="sub-menu-item7">EMPLOYMENT</li>
</ul>
</li>
<li class="menu-item">AWARDS & RECOGNITION</li>
<li class="menu-item4">NEWS & EVENTS</li>
<li class="menu-item5">CONTACT</li>
</ul>
</nav>
<div class="clear"></div>
</div>
</body>
</html>

here's a working fiddle: http://jsfiddle.net/KPET6/
javascript changes:
$(document).ready(function () {
$('#menu-wplook-main-menu').find('li a').click(function () {
$('#menu-wplook-main-menu').find('li a').removeClass('active');
$(this).addClass('active');
$($(this).closest('li.menu-item').children()[0]).addClass('active');
});
});

Try this fiddle
Jquery changes:
$(document).ready(function(){
$('li a').click(function(){
$('li').removeClass('active');
$(this).parents("li").addClass('active')
});
});
CSS changes
#menu-wplook-main-menu li.active > a{
color:#e53b51;
}

Working fiddle: http://jsfiddle.net/WhqxD/1/
JS:
$(document).ready(function(){
$(' #menu-wplook-main-menu li a').click(function(e){
e.preventDefault();
$(' #menu-wplook-main-menu li a').removeClass('active');
$(this).closest('li.menu-item').find("a:eq(0)").addClass('active');
$(this).addClass('active');
});
});