We Keep Coding

Need to click Each li Element without affecting parent

I have HTML Structure like
<ul>
<li><a></a>
<ul>
<li><a></a>
<ul>
<li><a></a>
<ul>
<li><a></a></li>
</ul>
</li>
</ul>
</li>
</ul>
I want to add 'active' class for relevant 'a' Element when corresponding li clicked.

$('#a').on('click', function(){
$('a', this).addClass('active');
});
<ul>
<li id="a"><a></a>
<ul>
<li id="b"><a></a>
<ul>
<li id="c"><a></a>
<ul>
<li id="d"><a></a></li>
</ul>
</li>
</ul>
</li>
</ul>

Use children() method, since you only want to select the direct child
$('li').click(function(){
$(this).children('a').addClass('active')
})
or use > to select direct child
$('li').click(function(){
$('>a', this).addClass('active')
})

A delegate click handler would most likely solve your problem best.
$('ul.master').on('click', 'li', function (evt) {
evt.stopPropagation();
// I added this line to remove active class from all other a tags
$(this).parents('ul.master').find('a').removeClass('active');
$(this).children('a').addClass('active');
});
See this jsfiddle
You could work on the <a> tag directly to capture the click for changing the active class. If you need to work directly with the <li> You can attach another handler.
$('a').click(function(evt){
$(this).addClass('active');
});
$('li').click(clickHandler);

You mean something like this?
$('li').on('click', function(){
$('a', this).addClass('active');
});

just target the li a directly:
$('li a').on('click', function(){
$(this).addClass('active')
});

$('li').on('click', function(){
$(this).closest('a').addClass('active');
});

Get first child using :first (if you have only one anchor per li) the use addclass method to assign class

I fixed your HTML:
<ul>
<li>
<a>A</a>
<ul>
<li>
<a>B</a>
<ul>
<li>
<a>C</a>
<ul>
<li>
<a>D</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
jQuery + JS code:
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
$('a').click(function(){
$(this).parent('li').addClass('active')
})</script>

$(document).on('click', 'a', function(){
if($(this).parent('li').length) {
$(this).parent('li').addClass('active');
}
});

How to find the nearest parent element attribute value using Jquery

I am facing a problem on getting the nearest parent element attribute value using Jquery. Can anyone help me on this. My element structure is as below,
<ul class="Someclass">
<li><span id=3 class="heading"></span>
<ul>
<li>
<ul> <li><span ><button onclick= "redirect()"></button></span</li>
<ul>
</li>
</ul>
</li>
<ul>
<script type="text/javascript">
function redirect() {
alert(....)
}
</script>
In the above code when i click that element having onclick event i want to get the value as 3 in alert() which is in the element having the class heading. The above code is in for loop so it will have more code like this in a same page.

Give this Try
function redirect(elem) {
alert($(elem).closest('.Someclass > li').children('span').attr('id'))
}
Change Markup to this:
<li><span><button onclick= "redirect(this)"></button></span</li>
this will reffer to the current object in DOM
By wrapping elem in $(elem) will convert it to jQuery object then you can traverse to the closest and find span
You can also filter that span with .children('span:first')
Fiddle Example

With your current code, pass the clicked element reference to the function like
<button onclick= "redirect(this)">asdf</button>
then
function redirect(el) {
alert($(el).closest('.Someclass > li').children('span').attr('id'))
}
Demo: Fiddle
Bu a more recommended way will be is to use jQuery event handlers like
<button class="redirect">asdf</button>
then
jQuery(function($){
$('.Someclass .redirect').click(function(){
alert($(this).closest('.Someclass > li').children('span').attr('id'))
})
})
Demo: Fiddle

This should do it.
alert($(this).closest('.heading').attr('id'));

$(".someclass li").click(function(){
$(this).closet('.heading').attr('id');
})

could you pass it on as a parameter to your redirect function? You'd somehow hold that value in a variable in your loop.

I got a solution if you can change the id and class to parent li
Working Demo
More about parent selector
Jquery
function redirect(elem) {
var myid = $(elem).parents(".heading").attr("id");
alert(myid);
}
HTML
<ul class="Someclass">
<li id="3" class="heading">
<ul>
<li>
<ul> <li><span ><button onclick="redirect(this)" id="haha">Go</button></span</li>
<ul>
</li>
</ul>
</li>
<ul>

Target parent next div

I´m trying to target a <div> which is the next <li> of the parent <div> of the function show_projectinfo(). I've tried .next(), .closest(), etc... with no luck, any ideas?
The function is that if I click on a.more_info then the li.slider img is hidden... I don´t know if it is out of scope completely... This is a div that is repeated so I can´t just use the IDs.
markup:
<li class="info">
<a id="previous-slider"> < </a>
<span>01/15</span>
<a id="next-slider" href="javascript:void(0)"> > </a>
<a class="more_info" href="javascript:void(0)" onclick="show_projectinfo()">Info</a>
</li>
<li class="slider">
<img src="img/horizontal.jpg" alt="horizontal" width="624" height="429">
</li>
this is the script:
function show_projectinfo(){
$(this).closest('.slider img').hide();
$('.info_content').fadeIn();
}

The basic problem is that you are calling the method from onclick instead of binding it with jquery.
In the way you use it, the this refers to the window and not the element that was clicked.
function show_projectinfo(e){
e.preventDefault();
$(this).parent().next().find('img').hide();
$('.info_content').fadeIn();
}
$(function(){
$('.more_info').click(show_projectinfo);
});
and remove the onclick attribute from the html
If you have (although you shouldn't) to use the onclick attribute then pass it the this as an argument
function show_projectinfo(element){
$( element ).parent().next().find('img').hide();
$('.info_content').fadeIn();
}
and
<a class="more_info" href="javascript:void(0)" onclick="show_projectinfo(this)">Info</a>

Try:
$(this).parent().next() // parent() should be the <li> then next() will get your next <li>

$('.more_info').click(function(e){
e.preventDefault();
$(this).parent().next().find('img').hide();
$('.info_content').fadeIn();
});

Instead of .closest use .parent and .next, then select the img with .find.
Check out this jsFiddle:
$("a.more_info").bind("click", function(e){
e.preventDefault();
$(this).parent("li").next("li.slider").find("img").hide();
$('.info_content').fadeIn();
return false;
});

$('li').click( function (){
var nextLi = $(this).closest('div').next().children('li:first-child').attr('id');
console.log(nextLi);
});
Considering below markup:
<div id='div1'>
<li id='1'>1</li>
<li id='2'>2</li>
<li id='3'>3</li>
</div>
<div id='div2'>
<li id='4'>4</li>
<li id='5'>5</li>
<li id='6'>6</li>
</div>
You can see my live jsFiddle for more details.

jQuery .show & .hide not working

I am currently working on building a small menu that will change divs based upon which one it clicked. So if one is clicked it will show the div associated with it and hide the others, ect. But I cannot get it to work, nor can I figure out why. Any help would be appreciated. Thanks.
Below is my code. I've clipped out the content as there was a lot of it.
<script type="text/javascript">
$('.mopHeader').click(function() {
$('#raid-progress-mop').show();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.cataHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').show();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.wotlkHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').show();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').hide();
});
$('.tbcHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').show();
$('#raid-progress-vanilla').hide();
});
$('.vanillaHeader').click(function() {
$('#raid-progress-mop').hide();
$('#raid-progress-cata').hide();
$('#raid-progress-wotlk').hide();
$('#raid-progress-tbc').hide();
$('#raid-progress-vanilla').show();
});
</script>
<span class="h4">Raid Progress <span class="mopHeader">MoP</span> <span class="cataHeader">Cata</span> <span class="wotlkHeader">WotLK</span> <span class="tbcHeader">TBC</span> <span class="vanillaHeader">WoW</span></span>
<div id="raid-progress-mop">
<ul id="raid-mop">
<li>Content A</li>
</ul>
</div>
<div id="raid-progress-cata">
<ul id="raid-cata">
<li>Content B</li>
</ul>
</div>
<div id="raid-progress-wotlk">
<ul id="raid-wotlk">
<li>Content C</li>
</ul>
</div>
<div id="raid-progress-tbc">
<ul id="raid-tbc">
<li>Content D</li>
</ul>
</div>
<div id="raid-progress-vanilla">
<ul id="raid-vanilla">
<li>Content E</li>
</ul>
</div>

Wrap your code in:
$(function(){ ... });
...which is the short form of:
$(document).ready(function(){ ... });
Cheers

You need to put the script underneath your markup. Either that, or put it inside document.ready callback:
$(document).ready(function() {
// code here
});
The problem is that when the script appears above the markup, it will execute before the HTML is loaded, and so the browser won't yet know about raid-progress-mop, etc.

How about doing that a little more dynamically inside a ready() function :
<script type="text/javascript">
$(function() {
$('[class$="Header"]').on('click', function() {
var myClass = $(this).attr('class').replace('Header', '');
$('[id^="raid-progress"]').hide();
$('#raid-progress-' + myClass).show();
});
});
</script>

jsBin demo
Wrap your code into a ready finction and this code I wrote is all you need:
$(function(){
$('span[class$="Header"]').click(function(){
var classNameSpecific = $(this).attr('class').split('Header')[0];
$('div[id^="raid-progress-"]').hide();
$('#raid-progress-'+classNameSpecific).show();
});
});
Explanation:
$('span[class$="Header"]') = target any span element which class ends with Header
Now just attach a click handler to all that spans.
Than, to hide all your div elements do:
$('div[id^="raid-progress-"]').hide(); = will hide any div which id starts with raid-progress-
and than you just need to target the div that contains the magic word:
$('#raid-progress-'+classNameSpecific).show();

$('.mopHeader') isn't defined yet. wrap your script with $(function(){...})

:not() in various guises isn't working

I'm making a simple jQuery navigation system but I am far from expert at it, as the following code may demonsytrate..
HTML:
<ul id="main-nav">
<li>HOME</li>
<li class="pipe">|</li>
<li id="about">ABOUT US</li>
<li class="pipe">|</li>
<li id="projects">PROJECT TYPES</li>
<li class="pipe">|</li>
<li id="reducing">REDUCING EMISSIONS</li>
<li class="pipe">|</li>
<li id="carbon">CARBON MARKETS</li>
<li class="pipe">|</li>
<li id="FAQs">FAQs</li>
</ul>
jQuery:
$(function () {
$("#main-nav li:not('.pipe')").hover(function () {
var $this = $(this).attr("id");
$('#nav-strip2 ul.sub-nav').hide();
$("#nav-" + $this).show();
});
});
The showing/hiding works just fine, the only issue is when the pipe is hovered over it hides everything. There's a reason the menu needs to be made up in <li>s and can't just be <a>s but it's not really relevant and long.
I'm trying here to exclude the .hover() stuff from happening when it's a li with .pipe class but there's no joy. What am I doing wrong? Any help appreciated. I'm sure there's a way of excluding <li>s with no ID attached, which would save assigning the .pipe class to all those <li>s. Alas I have not the jQuery ability to figure this out yet!
Thanks.

When using :not() as a selector, don't use quotes within its brackets:
$("#main-nav li:not(.pipe)")

try this:
$(function () {
$("#main-nav li").not('.pipe').mouseenter(function () {
$('#nav-strip2 ul.sub-nav').hide();
$("#nav-" + this.id).show();
});
});