Develop Reference

How to get all parents of <li> tag onclick of it?

I am designing dynatree so nodes are place in ul and li tags. the problem I am getting is I am not getting parents of clicked li element.
Here is my html code,
<ul class="bulk">
<li>gp1
<ul>
<li>gp2
<ul>
<li>gp3
<ul>
<li>c1
<li>c2
<li>c3
</ul>
<li>gp4
</ul>
</ul>
<li>gp5
<ul>
<li>gp6
<ul>
<li>gp7
<ul>
<li>c4
<ul>
<li>c5
<li>c6
</ul>
</ul>
<li>gp8
<li>gp9
</ul>
<li>gp10
</ul>
</ul>
Here is my jquery method
$('ul.bulk li').click(function(e)
{
//alert($(this).find("span.t").text());
alert(e.html());
});
Here is my fiddel http://jsfiddle.net/raghavendram040/ojnLrcjz/
The problem I am getting is if click on gp3 it alerts me 3 times, but I want if I click on gp3 it should alert its parents(gp1 and gp2). Here I place all li and ul dynamically except tag. How to achive this please help me in this

You can do something like
$(function () {
$('ul.bulk li').click(function (e) {
if($(e.target).is(this)){
$(this).parentsUntil('.bulk', 'li').each(function(){
alert(this.firstChild.nodeValue)
})
}
});
});
Demo: Fiddle

Add active class to nav links with exception for some li

I have ul.menu for which few li are styled differently, therefore those li dont need to add active class.
<ul class="menu">
<li id="1st" class="default">Text1</li>
<li id="2nd" class="default">Text2</li>
<li class="cross-out">Text3</li>
</ul>
jQuery to add active class for first two links, except li.cross-out
$('ul.menu li').click(function(){
$('ul.menu li').removeClass('active');
$(this).not('cross-out').addClass('active');
});
What is wrong? Hope I was clear enough...

You forgot the class identifier before cross-out:
$('ul.menu li').click(function(){
$('ul.menu li').removeClass('active');
$(this).not('.cross-out').addClass('active');
});

The period makes all the difference. Then because you may have several other ul.menu elements on your page, you just want the one whose li was clicked to change:
$('ul.menu li').click(function(){
$(this).siblings('li.active').removeClass('active');
$(this).not('.cross-out').addClass('active');
});
$('ul.menu li').click(function(){
$(this).siblings('li.active').removeClass('active');
$(this).not('.cross-out').addClass('active');
});
.active {
background-color:gray;
font-weight:bolder;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li class="default">Text1</li>
<li class="default">Text2</li>
<li class="cross-out">Text3</li>
</ul>
<ul class="menu">
<li class="default">Text1</li>
<li class="default">Text2</li>
<li class="cross-out">Text3</li>
</ul>
<ul class="menu">
<li class="default">Text1</li>
<li class="default">Text2</li>
<li class="cross-out">Text3</li>
</ul>

Jquery has a toggle class function
$("#td_id").toggleClass('default active');
related post jquery change class name

Jquery Slidetoggle, how to allow to show only one element?

This is my html:
<ul>
<li>
List
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</li>
<li>
List 2
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
</ul>
And this js:
$('ul li ul').hide();
$('ul li').click(function() {
$(this).children().slideToggle();
});
I want to create slidetoggle, for example: when user click "List" and after open this user click List 2 then list one is hiding.
DEMO: http://jsfiddle.net/7dxAb/
I want only one open when user click.
Thanks!

Try this:
$('ul li ul').hide();
$('ul li').click(function() {
var _this = $(this);
_this.children().slideToggle();
$('ul > li').not(_this).children('ul').slideUp();
});
You hide "ul"s in all ListN elements except one that is clicked.

You can slideUp() all the other ul's before the slideToggle() like this:
$('ul li').click(function() {
$(this).parent().find('ul').slideUp();
$(this).children().slideToggle();
});
I'm not sure if this is the most effecient way tho.

Add
$('ul li ul').slideUp();
to the click event. This will hide the other uls.
The finished code would look like:
$('ul li ul').hide();
$('ul li').click(function() {
$('ul li ul').slideUp();
$(this).children().slideToggle();
});
http://jsfiddle.net/yvPFx/2/
Edit: You can use a class to keep track of what is showing.
http://jsfiddle.net/yvPFx/3/

Try this:
$('ul li ul').hide();
$("ul li").click(function () {
$(this).children().slideToggle("slow", function() {
//
});
$(this).siblings().children().slideUp("slow");
});

jQuery drop down menu - hide inner ul when user clicks anywhere outside inner ul

I have a jQuery drop down menu and everything works well except when the user clicks outside of the inner ul (e.g. the rest of the body or document) the inner ul does not pull back up. Any ideas? Here's my code:
$(document).ready(function() {
$("#cp-nav ul li").click(function() {
$("#cp-nav ul ul").slideUp("fast", function(){});
$("ul", this).slideDown("fast", function(){
$("ul", this).slideUp("fast");
});
});
});
So maybe do something like:
$("ul", !this).slideUp("fast", function(){});
I am kind of new to jQuery and JavaScript, and I tried to look around for my problem but it's kind of difficult to phrase. I also noticed there is a callback function for jQuery's slideUp, and I can not figure out how to use it. Any help? It would be much appreciated! :-)
Edit
HTML:
<nav id="cp-nav">
<ul>
<li>Home</li>
<li>
Products
<ul>
<li>Design Platforms</li>
<li>3D Animation</li>
<li>Graphic Design</li>
<li>Python</li>
</ul>
</li>
<li>
About
<ul>
<li>Company History</li>
<li>CEO & Founder</li>
<li>etc.</li>
<li>etc.</li>
</ul>
</li>
<li>
etc.
<ul>
<li>etc.</li>
<li>etc.</li>
<li>etc.</li>
<li>etc.</li>
</ul>
</li>
</ul>
</nav>

This would do it
$(document).ready(function() {
$("#cp-nav").click(function(e){
e.stopPropagation(); // this stops the bubbling from going any higher
});
$('body').click(function(){ // this is only reached if the clicks comes outside the #cp-nav
$("#cp-nav ul ul").slideUp('fast');
});
$("#cp-nav ul li").click(function() {
$("#cp-nav ul ul").slideUp("fast", function(){});
$("ul", this).slideDown("fast", function(){
$("ul", this).slideUp("fast");
});
});
});

Remove all ul within li except the current li

I have to remove all ul within li except the current li.
<ul>
<li id="Li0">
<ul>
<li><span>Childnode1</span></li></ul>
</li>
<li id="Li1">
<ul>
<li><span>Childnode2</span></li></ul>
</li>
<li id="Li2">
<ul>
<li><span>Childnode3</span></li></ul>
</li>
<li id="Li3">
<ul>
<li><span>Childnode4</span></li></ul>
</li>
<li id="Li4">
<ul>
<li><span>Childnode5</span></li></ul>
</li>
<li id="Li5">
<ul>
<li><span>Childnode6</span></li></ul>
</li>
</ul>
So If i click on the li with id 'li4' every other li that are previous to this li or next to this li should have there ul to be removed from dom.
I was thinking of using the .not operator in jquery but till now not able to do this.

is that what you are searching for?
$(function(){
$('li').click(function(){
$(this).siblings().children("ul").remove();
});
});

Demo: http://jsfiddle.net/wwvBL/
$('li').on('click',function(){
var obj= $(this);
id= obj.attr('id');
obj.parent().find('li:not(#'+id+') > ul').remove();
})

This should help.
$(function () {
$('ul:first').delegate("li[id^='L']", 'click', function () {
$("ul:first > li[id!='"+$(this).attr('id')+"'] > ul").remove();
});
});​
Demo: http://jsfiddle.net/EJWnn/

Use siblings to find all other adjacent elements:
$("li").click(function() {
$(this).siblings().find("ul").remove();
});
You might want to have a more specific selector than "li".