We Keep Coding

preventDefault on lists that have a link ánd another list

I have a website where I am not able to change the HTML, I can only inject JavaScript and CSS. The website has a dropdown menu that doesn't work properly on Android. The parent menu is also a link, and when people click it they are taken to the link on the parent instead of opening the child/submenu.
The HTML (simplified)
<ul id="menu">
<li>
Parent menu ▼
<ul>
<li>Submenu link</li>
<li>Submenu link</li>
<li>Submenu link</li>
</ul>
</li>
<li>
Parent menu link
</li>
</ul>
And I have this jQuery:
var topmenuclicked == 0;
$("#menu > li a").click(function(event){
event.preventDefault();
if (topmenuclicked == 0) {
topmenuclicked = 1;
} else {
topmenuclicked = 0;
window.location.href = $(this).attr('href');
}
});
It's a bit messy and not the best way to solve this, but my main problem is with selecting only the a elements that have a submenu.
With the code as it is now I have to click all parent menu links twice and I'm not sure why.
So I need to be able to say something like $("#menu > li:has(ul) a) but I don't believe that works.

Use children("ul").length of li element
$("#menu > li a").click(function(event){
//use $(this).parent().children("ul").length
if($(this).closest("li").children("ul").length) {
event.preventDefault();
// the clicked on <li> has a <ul> as a direct child
}
if (topmenuclicked == 0) {
topmenuclicked = 1;
} else {
topmenuclicked = 0;
window.location.href = $(this).attr('href');
}
});

the previous answer won't work, cause submenu is not inside of A tag, but the rest is good.
Here is how can you fix it:
$('#menu > li a').on('click', function (event) {
if ($(this).next('ul').length) {
event.preventDefault();
// Parent link clicked
} else {
// Nested link clicked
// The ELSE part can be removed if custom logic is not needed
}
});
Another option can be:
$('#menu > li > a').on('click', function (event) {
event.preventDefault();
// Parent link clicked
});
$('#menu > ul a').on('click', function (event) {
// Nested link clicked
});

You can use parents for this. Also, use .on instead of .click
$('#menu').on('click', 'li a', function(event){
event.preventDefault();
var topmenuclicked = 0;
if($(this).parents('ul').length == 1) {
topmenuclicked = 1;
}
console.log('topmenuclicked -> ', topmenuclicked)
// do your stuff here
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul id="menu">
<li>
Parent menu ▼
<ul>
<li>Submenu link</li>
<li>Submenu link</li>
<li>Submenu link</li>
</ul>
</li>
<li>
Parent menu link
</li>
</ul>

put > before a. See below
var topmenuclicked == 0;
$("#menu > li > a").click(function(event){
event.preventDefault();
if (topmenuclicked == 0) {
topmenuclicked = 1;
} else {
topmenuclicked = 0;
window.location.href = $(this).attr('href');
}
});

In part because of #Love-Kesh his solution I came up with this that seems to be working.
$("#menu > li a").click(function(event){
// save parent in variable
var clickedlinkparent = $(this).parent();
// check if parent has any ul element as children
if (clickedlinkparent.children('ul').length) {
// prevent the link from opening
event.preventDefault();
// if link has not been clicked, do nothing
if (topmenuclicked == 0) {
topmenuclicked = 1;
// if link has already been clicked, go to href
} else {
topmenuclicked = 0;
window.location.href = $(this).attr('href');
}
}
});

Get index of li with button click

Using JQuery I'd like to get the index of the current li that I'm on when I click the button in the tabpanel residing in this list of BootStrap tabs.
<ul id="mytabs" class="nav nav-pills nav-wizard pill-font"
role="tablist" data-tabs="tabs">
<li role="presentation" class="active"><a href="#start"
data-toggle="tab">Before We Start</a></li>
<li role="presentation"><a href="#setup" aria-controls="setup"
role="tab">Setup</a></li>
<li role="presentation"><a href="#signup" aria-controls="Signing Up"
role="tab">Signing Up</a></li>
<li role="presentation"><a href="#speed" role="tab">Shipping Speeds</a</li>
<li role="presentation">Fulfillment</li>
<li role="presentation"><a href="#product"
role="tab">Products</a></li>
</ul>
I'm going to be using a counter in the button within each tabpanel so I can go forward and back. This is my JQuery without the counter..
$(document).ready(function(){
$(":button").click(function(e){
e.preventDefault();
$('#mytabs li:eq(2) a').tab('show');
});
});
Right now it just has the index 2 but if I can find the index of the current li I'll be able to add and subtract from it to get the li I want.
I tried with this but that just returns the index of the button, which isn't what I want.
Thanks everyone, a mish mash of everyone's answer turned into this:
$(document).ready(function(){
$(":button").click(function(e){
e.preventDefault();
var index = $(this).parent().index();
var length = $('#mytabs li a').length
alert(length);
index=index+1;
$('#mytabs li:eq('+index+') a').tab('show');
});
});

Try this:
$(document).ready(function(){
$(":button").click(function(e){
e.preventDefault();
var index = $(this).parent().index();
$('#mytabs li:eq(index) a').tab('show');
});
});

You can use .index to get de index of the element what you want in an array or list. It will be return the position or -1 (if it fails finding the element/value).
You can use it like this:
$(document).ready(function(){
$(":button").click(function(e){
e.preventDefault();
var index = $('#mytabs li').index($(this));
if(index > -1){
$('#mytabs li:eq('+ index +') a').tab('show');
}
});
});
If you want to use "this", I can show you how:
$(document).ready(function(){
$(":button").click(function(e){
e.preventDefault();
var element = $(this);
});
});
If you want to add a class to the element you can use element.addClass("yourClass") to get it.
I wish it that help to you.
P.D: I recommend change your jQuery selector from :button to #mytabs li, so you can get the exact element that you has been click, or you can use element.closest("li") to get the parent li.

This should work:
$(function() {
$("li").click(function() {
var li = $(this);
console.log( li.parent().find("li").index(li));
});
});
Returns you the index of the li you clicked.

check previous active link after clicking the link in menu bar, jQuery

I want to add class in link if previous link was home link i am trying so hard but I am not getting the answer of it.
it is simple nav bar, if active link home then clicked link will be added a class..thats it
$('ul li').click(function(){
var prevLink = ??; // how can i get prevLink here
if(prevLink == 'Home') {
$(this).addClass("addext");
$('ul li').removeClass("addext");
}
});
how to check previous active link ?

Hope this will help:
var globalPrevLink = "";
$('#Home').onclick(function(){
globalPrevLink = window.location.href; // this is clicked last time so remember it in globalPrevLink variable
});
Put above code somewhere in your js and change Home to whatever ID you have given to your home link tag.
then change your code as
$('ul li').click(function(){
var prevLink = globalPrevLink; // globalPrevLink is assigned here
if(prevLink == 'Home') { // change this also as accordingly, use console log
$('ul li').removeClass("addext"); // switch as suggested in other comment
$(this).addClass("addext");
}
});

Not the complete answer, because of your missing html, but you should switch these two lines:
$(this).addClass("addext");
$('ul li').removeClass("addext");
To:
$('ul li').removeClass("addext");
$(this).addClass("addext");
Otherwise you set, and instant remove the class.

Use $('ul li.addext').text(); to get the li text which has addest class
$('ul li').click(function(){
var prevLink = $('ul li.addext').text();
if(prevLink == 'Home') {
$('ul li').removeClass("addext");
$(this).addClass("addext");
}
});

Add class active when clicking the menu link with Jquery

I have HTML
<div id="top" class="shadow">
<ul class="gprc">
<li>Home</li>
<li>Text1</li>
<li>Text2</li>
<li>Text3</li>
<li>Text4</li>
</ul>
</div>
and JQUERY
$(function () {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
$('#top a').each(function () {
if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
$(this).addClass('active');
}
});
});
The problem is that when i click on the Home link all tabs are getting active class and don't understand why. I need it for the first link to not get any active class.

I'm also looking for this solution and I have tested your code. On the first approach all links are highlighted and when I click other links it is working properly. The problem was on the home page because all links are highlighted because there is "no event been received" when the page is loaded, the code will work if you send a command or by clicking each links, theoretically. To stop this behavior, I found this code to one of the answers above, add this code and change the ".sibling()" to ".previousSibling()"
$(this).parent().sibling().find('a').removeClass('active');
".sibling()" will highlighted at the end of your links change it to ".previousSibling()" so it will go to first (Li)
$(this).parent().previoussibling().find('a').removeClass('active');
Your code will be like this:
$(function () {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
$('#top a').each(function () {
if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
$(this).addClass('active');
$(this).parent().previoussibling().find('a').removeClass('active');
}
});
});

Check this , this will only activates clicked tab , remove active for all and then add for the one clicked
$("#top a").click(function() {
$('a').removeClass('active');
$(this).addClass("active");
});
Check this

You may try this out. It will help you:
<script type="text/javascript">
$(function () {
$('#sidebar li a').each(function () {
var path = window.location.pathname;
if (path.indexOf('?') > 0) {
var current = path.indexOf('?');
}
else {
var current = path;
}
var url = $(this).attr('href');
var currenturl = url.substring(url.lastIndexOf('.') + 1);
if (currenturl.toLowerCase() == current.toLowerCase()) {
$(this).addClass('active');
var par = $(this).parent();
par.addClass('open');
}
});
});
</script>

You're running a foreach loop on all <a> tags within your #top div. So of course it'll add the class active to all of them.
I think what you're trying to do is this: http://jsfiddle.net/rLddf/4/
I used the click event instead.
edit switched link to Kristof Feys example - more efficient.

try this...
$(function() {
$('#yourMenu a').each(function(){
$current = location.href;
$target= $(this).attr('href');
if ( $target== $current)
{
$(this).addClass('active');
}
});
});

I came across the same issue and I found it easier to just add an additional if statement so that the function would fire on all pages except the home page which met my needs.
$(function(){
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
$('#top a').each(function(){
if ( window.location.pathname != '/' ){
if(urlRegExp.test(this.href.replace(/\/$/,''))){
$(this).addClass('active');
}
}
});
});
You could also add in an else statement to show an active link on the homepage by targeting the link directly if required.

I think you need something like this:
$(function () {
$("#top a").click(function(e){
e.preventDefault();
$(this).addClass('active');
$(this).parent().siblings().find('a').removeClass('active');
});
});
Fiddle Demo

change active li when clicking a link jquery

I want to make a menu, and change the class when clicking.
When i click on the "li" with no class="active", i want jquery to add a class on the empty <li> and remove it from the othes "li".
<li class="active">data</li>
<li>data 2</li>
can somebody help me ? :)

I think you mean this:
$('li > a').click(function() {
$('li').removeClass();
$(this).parent().addClass('active');
});

// When we click on the LI
$("li").click(function(){
// If this isn't already active
if (!$(this).hasClass("active")) {
// Remove the class from anything that is active
$("li.active").removeClass("active");
// And make this active
$(this).addClass("active");
}
});

$('li').click(function()
{
$('li', $(this).parent()).removeClass('active');
$(this).addClass('active');
}

$(window).load(function(){
page=window.location.pathname.split("/").pop();
menuChildren = $('a[href="' + page + '"]');
$(menuChildren).parent('li').addClass('active');
});
The above code will look up the url and pop out the last element (Which is the file name). Then it finds the anchor tag with href attribute which has the same value of the url then it puts an active class for its parent li tag

This should get you close.
$("li").click(function() {
$("li").removeClass("active");
$(this).addClass("active");
});