Jquery not selector not working on child element? - javascript

$(document).on('click', '#ul li:not(.info)', function(){
alert();
});
My html is like this
<ul id="ul">
<li></li>
<li><a href="#" class="info"></li>
</ul>
why it still trigger when I click on .info?

Because your HTML defines .info class on the <a> descendant instead of the <li> itself, while your selector denotes :not(.info) which means the <li> is not having the .info class.
Try this instead:
$(document).on('click', '#ul li:not(:has(.info))', function(){
alert();
});
Alternatively, you can simply move your .info class to the <li> itself:
<li class="info"><a href="#"></li>
See jQuery's has and Fiddle

can you make it this and try
$(document).on('click', '#ul li a:not(.info)', function(){
alert();
});

#ul li:not(.info) looks for a class in li that is not info
#ul li a:not(.info) will give you the right result
JSFiddle

Related

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 Remove a Class from a Sibling of a Parent

I'm working with the off-canvas script from Foundation and it isn't working out of the box (of course) when I try to use the submenu options. I realized it wasn't adding a class (move-right) to the ul's of the li's in the off-canvas navigation. So I wrote a script to add that class which can be found here:
jQuery(document).ready(function() {
jQuery('ul.off-canvas-list li a').click(function() {
jQuery('ul.off-canvas-list li ul.left-submenu').addClass('move-right');
});
});
And here is how my HTML is structured:
<ul class="off-canvas-list">
<li class="has-submenu">Name 1
<ul class="left-submenu">
<li class="back">Back</li>
<li><a href="#"></li>
<li><a href="#"></li>
</ul>
</li>
<li class="has-submenu">Name 2
<ul class="left-submenu">
<li class="back">Back</li>
<li><a href="#"></li>
<li><a href="#"></li>
</ul>
</li>
<li class="has-submenu">Name 3
<ul class="left-submenu">
<li class="back">Back</li>
<li><a href="#"></li>
<li><a href="#"></li>
</ul>
</li>
...etc
</ul>
My problem is that my script is adding the class to ALL ul.left-submenu's instead of just the one directly under the li that I click on. I can't figure out how to add the class 'move-right' to only the 'ul.left-submenu' child of the parents li that I clicked on and remove the 'move-right' class from the other 'ul.left-submenu'
I thought maybe using the sibling() selector, but I wasn't quite sure how to implement that into my script. Any and all help is greatly appreciated.
Another issue has arose and that is being able to close the opened "ul.left-submenu" by clicking on the "Back" which comes before the other li's in each ul.left-submenu. I updated the HTML above to include the "" and also have provided the script below that I tried using that hasn't worked.
jQuery('li.back').on('click', function() {
console.log('close submenu');
jQuery('ul.left-submenu').removeClass('move-right');
});
The target element is the grandparent of the clicked element so you can use the closest method:
$('ul.off-canvas-list li a').click(function() {
$('.move-right').removeClass('move-right');
$(this).closest('ul.left-submenu').addClass('move-right');
});
you can add it directly to the clicked element by using this
jQuery(document).ready(function() {
jQuery('.left-submenu li a').click(function() {
jQuery('.left-submenu').removeClass('move-right'); // remove class move-right from every elements with class left-submenu
jQuery(this).parents('.left-submenu').addClass('move-right'); // add class move-right to the parent with class left-submenu of current element
});
});
Edit:
if in your updated code, you want to click only by a right after .has-submenu, you need this probably, so it didn't trigger on click for a inside .left-submenu
jQuery(document).ready(function() {
jQuery('.has-submenu > a').click(function() {
jQuery('.left-submenu').removeClass('move-right'); // remove class move-right from every elements with class left-submenu
jQuery(this).children('.left-submenu').addClass('move-right'); // add class move-right to the children with class left-submenu of current element
});
});
sorry for my mistakes not looking again for the code before posting it, because ul.left-submenu is in the same position with a and not it's children, you need to use .siblings to get ul.left-submenu, so change the code to this
jQuery(document).ready(function() {
jQuery('.has-submenu > a').click(function() {
jQuery('.left-submenu').removeClass('move-right');
jQuery(this).siblings('.left-submenu').addClass('move-right');
});
});
here's the working Example in Fiddle
Ok, so you want to add a class move-right to the ul.left-submenu that is directly under the has-submenu li that you clicked, right?
So:
$(document).ready(function() {
//Trigger the click only on the li's has-submenu
$('li.has-submenu').on('click', function() {
//Remove the class from other ul, if there's any
$('ul.left-submenu').removeClass('move-right');
//Finds the direct ul child using the '>' selector, and adds the class.
$(this).find('> ul.left-submenu').addClass('move-right');
});
});
The way you have your selector it targets all the ul.left-submenu elements you have, another way to target just the element clicked would be like this:
$('.off-canvas-list').on('click', 'ul.off-canvas-list li a', function (){
$('.move-right').removeClass('move-right');
$(event.target).closest('ul.left-submenu').addClass('move-right');
});
Your selector is too broad. If what you want to do is to add move-right to left-submenu when you click has-submenu, that's what you need to do:
$('.has-submenu').click(function() {
$(this).find($('.left-submenu')).addClass('move-right');
});
Fiddle: http://jsfiddle.net/x9zcav0p/
If you need to reset move-right, do this:
$('.has-submenu').click(function() {
$('.move-right').removeClass('move-right');
$(this).find($('.left-submenu')).addClass('move-right');
});
Fiddle: http://jsfiddle.net/x9zcav0p/1/
Updated markup:
For your updated markup, you can target the next() element after the anchor tag:
$('.has-submenu > a').on('click', function() {
$('.move-right').removeClass('move-right');
$(this).next().addClass('move-right');
});
Fiddle: http://jsfiddle.net/x9zcav0p/2/

changing active class for list element

I'm trying to change the 'active' class for the clicked list item but I'm missing something. Here is what my HTML and jquery look like:
HTML
<ul class="additional-menu">
<li class="active"> Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
jQuery
$("#link2").click(function(){
if ($(this).find('#additional-menu li').hasClass('active')) {
//console.log("Active class seen");
$(this).find('#additional-menu li').removeClass('active');
$(this).addClass('active');
}
});
Any idea what I'm missing? I'm not even detecting the active class at this point...
You could minimize your code to just
$('.additional-menu').on('click','li', function(){
$(this).addClass('active').siblings().removeClass('active');
});
Demo at http://jsfiddle.net/DvHBp/
There are many problems in the code
//from what i can understand you need to change the active class to the clicked li element not just the link2 element
$("#link2").click(function(){
// additional-menu is not an id it is a class and it is not a descendant of the li element
if ($(this).find('#additional-menu li').hasClass('active')) {
//console.log("Active class seen");
$(this).find('#additional-menu li').removeClass('active');
//if you are using a if statement then addClass should be outside the if block
$(this).addClass('active');
}
});
try
jQuery(function(){
var $lis = $('.additional-menu > li').click(function(){
$lis.removeClass('active');
$(this).addClass('active')
});
})
find() get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
You should use
$(this).parent().siblings('#additional-menu li')
because in your html structure #link2 a tag has no descendant of #additional-menu li
You can make something very generic:
<ul class="additional-menu">
<li class="active"> Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
And using this JavaScript:
$(function(){
$('.additional-menu > li').click(function(){
$('.additional-menu > li').removeClass('active');
$(this).addClass('active');
});
});
Try this solution :
HTML:
<ul class="additional-menu">
<li><a id="link1" href="link1"> Link1</a></li>
<li>Link2</li>
<li>Link3</li>
</ul>
CSS:
.active{
background-color : red;
}
jQuery:
//on first time load set the home menu item active
$(".additional-menu a#link1").addClass("active");
//on click remove active class from all li's and add it to the clicked li
$("a").click(function(){
$("a").removeClass("active");
$(this).addClass("active");
});
Demo

why the javascript toggle code doesn't work?

I have added the Prototype library to my site, then add the following code. but when i click the span, the ul content is not hidden. the link href still work.
Event.observe(window, 'load', function() {
Event.observe('.block-category li.parent span', 'click', function(e){
$('.block-category li.parent ul').toggle();
e.preventDefault();
});
});
html:
<div class="block block-category">
<li class="level-top parent">
<span>text one</span>
<ul> //the 1 ul
<li><a><span>....</span></a></li>
<li><a><span>....</span></a></li>
<li><a><span>....</span></a></li>
<li><a><span>....</span></a></li>
</ul>
</li>
<li class="level-top"><span>....</span></li>
<li class="level-top parent">
<span>text two</span>
<ul> //the 2 ul
<li><a><span>....</span></a></li>
</ul>
</li>
<li class="level-top parent">
<span>text three</span>
<ul>
<li><a><span>....</span></a></li>
<li><a><span>....</span></a></li>
</ul>
</li>
</div>
thank you.
ps: when click text one, the the 1 ul toggle. when click *text two*the 2 ul toggle, ...
You are using CSS selectors as arguments to Prototype's $() and Event.observe() functions. Neither of these functions accepts a selector. They both expect element IDs instead.
You can use $$() instead of $() and give it a selector. Note that this returns an array of extended elements and not just a single one.
http://api.prototypejs.org/dom/Event/observe/
http://api.prototypejs.org/dom/dollar/
http://api.prototypejs.org/dom/dollar-dollar/
You should try $$ to select multiple elements and then call observe for each one of them:
Event.observe(window, 'load', function() {
$$('.block-category li.parent > a span').each(function (element) {
element.observe('click', function (e) {
e.element().up().next('ul').toggle();
e.preventDefault();
});
});
});

Finding children of element without an id or class

I have the following code structure:
<ul class='menu'>
<li>
Main Menu
<ul class='hide'>
<li>SubMenu1</li>
<li>SubMenu2</li>
</ul>
</li>
<li>
Main2
<ul class='hide'>
<li>Sub1</li>
</ul>
</li>
</ul>
Is there a way for me to have a jQuery click event on Main Menu and Main2 in a generic way that will remove the class 'hide' of the correct children each time?
Here is another way, which uses event delegation and only runs when the li element and not its children was clicked:
$('ul.menu').on('click', 'ul.menu > li', function(e) {
if(e.target === this) {
$(this).children('ul').toggleClass('hide');
}
});
DEMO
$("ul.menu > li").on("click", function () {
$(this).children("ul").removeClass("hide");
});
Example: http://jsfiddle.net/dpkBL/
Dont always do what the crowd tells you, at least think about it for a while!
I bet people will recommend you to use a selector such as ul.menu > li, but please remember that this will not only trigger a click event when you click on the text "Main Menu", but also when you click on any of the other content inside the matching li.
If you'd like to implement a show/hide toggle you are far better off wrapping the text "Main Menu" inside it's on element, and then use something as the below to alter what you may want to alter.
$(<main menu text selector>).siblings (<siblings selector>);
Still want/have to follow the crowd?
If this is the case I'd recommend you to at least do it with a little twist to prevent what I previously described.
(edit: revised version after reading the jquery documentation for elements)
$('ul.menu > li').click (function(e){
if (e.target === this) {
$(this).children ('.hide').removeClass ('hide');
}
});
$("ul.menu > li").click (function () {
$(this).find ('.hide').removeClass ('hide');
});
$("ul.menu > li > *").click (function () {
return false; // prevent event from bubbling up
});
Sample implementation of recommended version
The below will bind a click-event-listener to .menu-toggle, when the event is fired the siblings (ie. the tags who are in the same scope as the clicked .menu-toggle) matching .hide will have their class="hide" removed.
Javascript
$(".menu-toggle").click (function () {
$(this).siblings ('.hide').removeClass ('hide');
});
HTML
<ul class='menu'>
<li>
<span class="menu-toggle">Main Menu</span>
<ul class='hide'>
<li>SubMenu1</li>
<li>SubMenu2</li>
</ul>
</li>
<li>
<span class="menu-toggle">Main2</span>
<ul class='hide'>
<li>Sub1</li>
</ul>
</li> </ul>
Take a look at the child selectors. I think that is what you want.
$('.menu > li').click(function () {
$(this).children('ul').removeClass('hidden');
});

Categories