I'm not sure what exactly is wrong with my code
<ul>
<li>
<p id='placeHolder' style='display: none;'>Empty NOW!</p>
<ul class='list'>
<li>Item One<a href='#' class='clear'>Remove</a></li>
<li>Item Two<a href='#' class='clear'>Remove</a></li>
</ul>
</li>
</ul>
$('a.clear').click(function() {
$(this).parent().remove();
if($('.list li').length == 0) {
document.getElementById('placeHolder').style.display='block';
console.log('its empty now');
}
return false;
});
Let's say you removed the items from the list and li is now ZERO, I'm not sure why placeHolder doesn't actually display the placeHolder?
I used console.log to make sure the length actually checked and it is a valid statement. Any suggestion on why getElementById not firing?
In order to validate your condition $('.list li').length == 0, you have to remove the two list items, either by finding a common selector :
$('li a').click(function() { // the choice of the selector is of course up to you :)
$(this).parent().remove();
if($('.list li').length == 0) {
document.getElementById('placeHolder').style.display='block';
console.log('its empty now');
}
return false;
});
or by removing the parent of the parent : $(this).parent().parent().remove();
Related
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');
}
}
});
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.
I have list:
<ul class="nav">
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
</ul>
I am trying to get the index of the <li> I just clicked.
What I tried is something with index() but it doesn't work as expected.
Am I missing something?
Here is my code:
console.log($('.nav li').index());
Clicking on the 2nd <li> should return "2" (or 1, if the index is starting with 0)
This here is my click-function:
$('.nav .hasChild > a').click(function(e) {
console.log($('.nav li').index());
....
});
The "hasChild"-class is not important in my case
Try this:
$('.nav .hasChild > a').click(function() {
var indexVal = $(this).closest('li').index();
console.log(indexVal);
});
Try this-
$('.nav .hasChild > a').click(function(e) {
console.log($(this).parent("li").index());//this holds the current element reference which is clicked
}
Perhaps I am missing something with the extra classes but surely it is as simple as;
$('.nav li').click(function() {
console.log($(this).index());
});
I have this
HTML
<p class="showOnlyChoose"> Show </p>
<ul>
<li>Not Taken</li>
<li>Not Taken</li>
<li class="Choose">Taken</li>
<li>Not Taken</li>
<li class="Choose">Taken</li>
<li>Not Taken</li>
</ul>
What I am wanting is if I click on the Show only the Taken list will show and others will hide. I searched but did not find good results. Also is this possible with jQuery ? I am not very good in jQuery. Any help will be appreciated.
$('.showOnlyChoose').on('click', function() {
$('li.Choose').show().siblings().hide();
// $('li').hide().filter('.Choose').show();
})
You can use this:
$('.showOnlyChoose').click(function(){
$('li').toggle();
$('li.Choose').show();
var current_text = $(this).text();
$(this).text(current_text == "Show" ? "Show" : "Hide");
});
Demo here
And when you want to get them back just use: $('li').show();
If you want the paragraph to toggle the "Not Taken" rows and change "Show" to "Hide" (and vice versa), use:
$('.showOnlyChoose').on('click', function() {
$('li').toggle(); //show or hide all items
$('li.Choose').show(); //show .Choose items
if ($('.showOnlyChoose').html() == 'Show') { //if paragraph says "Show" change to "Hide"...
$('.showOnlyChoose').html('Hide');
}
else $('.showOnlyChoose').html('Show'); //...otherwise change "Hide" to "Show"
})
EDIT: Added "Show"/"Hide" functionality.
If you want to select elements by its content you can use $(selector).text()
$(".showOnlyChoose").click(function() {
$("ul li").each(function(){
if($(this).text() != 'Taken') {
$(this).hide();
}
});
});
If you want to select by class:
$(".showOnlyChoose").click(function() {
$("ul li").each(function(){
if(!$(this).hasClass("Choose") {
$(this).hide();
}
});
});
When a user clicks the Accordion Menu button it usually works. But, about 1 out of 10 times the animation doesn't stick and goes back to either expanded or collapsed, depending on what state it started at. I've copied the scripts from other places, but they seem simple enough.
HTML:
<ul id="system-nav">
<li><div>Umbrella</div>
<ul>
<li>Admin</li>
<li>Dashboard</li>
<li>Daylight</li>
</ul>
</li>
</ul>
Like I've said, I've tried several different versions of the same thing. These were just taken from random places and I've only edited them slightly. All of them do the same thing.
$("#system-nav > li > div").click(function(){
if(false == $(this).next().is(':visible')) {
$('#system-nav ul').slideUp(300);
}
$(this).next().slideToggle(300).delay(250);
});
$('#system-nav ul:eq(0)').hide();
$(document).ready(function() {
$('#system-nav li div').click(function() {
$('#system-nav ul').slideUp('slow');
$(this).next().slideDown('slow');
});
$("#system-nav ul").hide();
});
$(document).ready(function(){
$('#system-nav li div').click(function() {
$(this).next().slideDown('slow');
return false;
}).next().hide();
});
In the first JS sample using :visible is not the right proprety. Use :hidden instead
In the second one you're cliping it ?
In the last one you're canceling it ?
Here's a working code: http://jsfiddle.net/Q9qNw/
$("#system-nav").on("click","div",function(){
if ($(this).next().is(":hidden")) {
$(this).next().slideDown("500");
} else {
$(this).next().slideUp("500");
}
});