I am using the following piece of code in order to add a class to an li item.
JavaScript
$(document).on('click', '.sidenav .page_item_has_children', function({
$(this).addClass('side_open').siblings.removeClass('side_open')
})
As you can see It refers to the element that is clicked, in this instance an li. I need to apply this to the li's child element which is a ul so that the dropdown can appear. I assume I basically need something along the lines of the following however I can not work it out.
$(document).on('click', '.sidenav .page_item_has_children', function({
$(child).addClass('side_open').siblings.removeClass('side_open')
})
If anyone has any ideas on how this can be done that would be great!
Thanks - Scott
Using jQuery you could try jQuery(this).find('ul') or jQuery(this).children('ul');
See also: How to get the children of the $(this) selector?
Use $(this).find('ul'); to return all ul that are descendants of the li u referenced or $(this).children('ul') to find only 1st-level descendants.
Related
I am trying to fade out a clicked ul element. Here is the thing, I have multiple ul elements that contain the same class name for when selecting. To handle that I am phasing out a id for each specific ul to know which element to fade out. My issue is though, when trying to fade out the ul element. Nothing happens at all, even though it contains the correct id.
Here is what I am doing:
$(".start-dropdownClose").click(function(event){
event.stopPropagation();
$thisOne = $($(this).parent().parent().attr('id'));
$($thisOne.selector).fadeOut();
});
When I alert the $thisOne.selector it displays the correct id of that selected ul element. I just don't know why it wont fade out though?
Suggestions, thoughts?
Don't use its selector, just use the element object:
$(".start-dropdownClose").click(function(event){
event.stopPropagation();
$(this).parent().parent().fadeOut();
});
Try these two approaches:
$(".start-dropdownClose").click(function(event){
event.stopPropagation();
$thisOne = $(this).parent().parent();
$thisOne.fadeOut();
});
or
$(".start-dropdownClose").click(function(event){
event.stopPropagation();
$thisOne = $($(this).parent().parent().attr('id'));
$("#"+$thisOne).fadeOut();
});
The first one $thisOne is the ul you are trying to select and fadeout. So just fading it out should work.
In the second approach, $thisOne is an id string, so to select it correctly with jQuery the correct syntaxis is $("#idString")
I have many li(list) items which are generated by a loop thanks to java servlets, now
I want to change the class of the current li(list) which is selected
$('li.doBlokkeer').click(function(e) {
$('.doBlokkeer').addClass('doDEBlokkeer').removeClass('doBlokkeer');
});
so if a current li is selected its class need to be changed (it needs to have doDEBlokkeer).
The above code works.. but it changes ALL my li items... so guys do you know how to change the class of the current item $(this) ? I have no jquery skill, pls help me out. Thanks!!
You need to use $(this) instead of $('.doBlokkeer') in the click event handler. As $('.doBlokkeer') will return all the elements having class doBlokkeer where as $(this) represents the jQuery object that is source of the event.
Live Demo
$('li.doBlokkeer').click(function(e) {
$(this).addClass('doDEBlokkeer').removeClass('doBlokkeer');
});
You can also try using toggleClass to switch between two classes.
Live Demmo
$('li.doBlokkeer').click(function(e) {
$(this).toggleClass('doDEBlokkeer');
});
I have created a Responsive Sub-Menu for a Responsive Website that actives at equal to or less than 768px. I have it set up to where jQuery removes the link for the Parent List Item and displays the sub-menu onClick.
The problem is, there is a Parent that has no children and I am trying to only remove the link(href) of Parent Elements that do have children. But, I even applied it in an If statement so it wouldn't remove the parent link if it has no children, that didn't work. So I tried siblings, which I thought would make more sense. But it is still not behaving as so.
Here is my jQuery for this:
if (jQuery(".navigation > ul > li > a").siblings("ul")){
jQuery(".navigation > ul > li > a").removeAttr("href");
};
You may see an example here: http://stlredtails.com/construction/
Edit: The Contact link is the link that has no "ul" children, practical terms, there is no sub-menu.
Thank you!
your if statement always returns true and your following command removes the href attribute from all matched elements. you will need to loop through the matching anchors and process an if statement for each one.
jQuery(".navigation > ul > li > a").each( function() {
if(jQuery(this).siblings("ul").length) {
jQuery(this).removeAttr("href");
}
});
I'm not exactly sure if I understand what you are asking, but it sounds like you may be in need of jQuery's :empty and/or :parent selectors.
Try something like:
$(".navigation > ul:parent > li > a")
jQuery :empty documentation
jQuery :parent documentation
jQuery Siblings Not Working?
It is working. Yet it always evaluates to a jQuery wrapper object even if it matched nothing, and that value is truthy so your if-block always executes. Check for the .length-property to be not 0.
I have it set up to where jQuery removes the link for the Parent List Item and displays the sub-menu onClick.
There is absolutely no reason to remove the href attribute. To prevent following the link even if you clicked ("activated") it, call preventDefault() on the event object in the click event handler!
I want to select all the child elements of a parent element (except the first) with jQuery and I have the below..
$("li:not(:first-child)");
But I'm not sure how I can apply it to just the certain parent ID, would something like this work?
$('#myID').("li:not(:first-child)");
If so, I then want to add an element before the respective <li> tag. Would I then be able to do this with?
$('#myID').("li:not(:first-child)").before('<li>Test</li>');
I'm guessing something above is wrong as it isn't working.
Close, just pass in the selector context:
$("li:not(:first-child)", "#myID")
http://api.jquery.com/jQuery/
jQuery( selector [, context] )
selector: A string containing a selector expression
context: A DOM Element, Document, or jQuery to use as context
EDIT:
My initial answer assumed that you have no more li within the child's li. if you strictly only wants to select the children, use >:
$("#myID > li:not(:first-child)")
There's different solutions:
$("li:not(:first-child)", "#myID"); // see #SiGanteng answer
$("#myID li:not(:first-child)");
$("#myID").find("li:not(:first-child)");
Simple: using the :gt() help selector:
Just do it like: demo fiddle
$("#myID li:gt(0)").before('<li>Test</li>');
If you are concerned about speed :) :
$("#myID").find("li:gt(0)").before('<li>Test</li>');
or like: demo fiddle
$("#myID li:not(:first-child)").before('<li>Test</li>');
Assuming #myID is a ul or ol element, another possible way to get all children but the first is
$('#myID').children().slice(1)
i have the following code that adds data to unordered lists. The troublesome code is as follows:
$('li:not(:first-child)').click(function() {
var clickedLi = this;
$(this).parent().prepend(clickedLi);
var selectedLi = $(this).text();
alert(selectedLi);
$(this).parent().parent().nextAll().children('ul').children().replaceWith('<li>Please select</li>');
//ajax call
var returnedData = "<li>Dataset1</li><li>Dataset2</li><li>Dataset3</li>";
//populate next with returned data
$(this).parent().parent().next().children('ul').append(returnedData);
});
If you click on one of the options in the first ul, data gets added to the second ul. However, the list items under this ul are not clickable, and I need them to be so, so that 'chain' can be continued.
Where is the bug? Any help would be much appreciated. Thanks in advance.
Try with: (if you use jQuery greater than 1.6.8. )
$(document).on('click','li:not(:first-child)',function() {
http://api.jquery.com/on/
I can suppose, judging by your code, that you expect the freshly added li to inherit the behaviour you append to the existing ones. Unfortunately it cannot work with the code written that way.
You need to attach the click event in an "observable" way so newly added elements to the dom will get the event handler attached.
To do this, you must use the .on method. You can check its reference here