how to addClass to closest element - javascript

I have a dropdown menu and I want to verify if the submenu hasClass in, then for the closest ul that has class .menu add class in. Here is my code but it adds for all ul that has class .menu instead closest.
<script>
if($(".submenu").hasClass( "in" )) {
$(".submenu").closest(".menu").addClass("in");
}
</script>

You need to change the selector
$(".submenu.in").closest(".menu").addClass("in");
Alternatively :has() selector can also be used as
Selects elements that contain at least one element that matches the specified selector.
$(".menu:has(.submenu.in)").addClass("in");

Try this:
For looking up the DOM use this:
<script>
$('.submenu.in').closest('.menu').addClass("in");
</script>
For looking into the children elements use this:
<script>
$('.submenu.in .menu').first().addClass("in");
</script>

I'm assuming you want to target a child element of .submenu so try this
<script>
if($(".submenu").hasClass( "in" )) {
$(".submenu").children(".menu").addClass("in");
}
</script>
Or if you just want first level children here's a solution: How to select only the first level children in JQuery

Related

How to check if element exists after the current element with jQuery?

I need to check the following
if after $('.brandModelLineWrapper') there isn't a clearfix div, add it:
$('.brandModelLineWrapper').after("<div class='clear'></div>")
How could I do that?
You can use .next() with :is selector to check if it is div with class clear. and you can use .after() or insertAfter() to append the clear div based on first condition:
if(!$('.brandModelLineWrapper').next().is('div.clear')){
$('.brandModelLineWrapper').after("<div class='clear'></div>");
}
Use next() with a specific selector to check
if(!$('.brandModelLineWrapper').next('div.clear').length){
$('.brandModelLineWrapper').after("<div class='clear'></div>");
}

Jquery check element tag name

I have the following JQuery:
$('.one').addClass('two');
I need to add the class two only if the element of class one is a list item li. How do I do this?
You can try this:
$('li.one').addClass('two');
Use jQuery is()
if($('.one').is('li')){
$('.one').addClass('two');
}
or alternatively, in one line
$('li.one').addClass('two');
This will select only li elements of class one and nothing else
You could also try:
$("li.one").addClass("two");
All li elements that have a class one will have the class two added.

Find element above another using jQuery

I'm trying to find the element using jQuery from the following html.
<ul class="gdl-toggle-box">
<li class="">
<h2 class="toggle-box-title"><span class="toggle-box-icon"></span>Volunteer Form</h2>
<div class="toggle-box-content" style="">
</div>
</li>
</ul>
What I'm looking to do is when the h2 is clicked find the li above the h2 add a class active to it. Tried a few different calls but no luck.
EDIT
The biggest issue is that there are multiple toggle boxes on a page so something like this works on pages with a single toggle but pages with multiple the result is they all open together.
var gdl_toggle_box = jQuery('ul.gdl-toggle-box');
gdl_toggle_box.find('li').each(function(){
jQuery(this).addClass('item');
});
gdl_toggle_box.find('li').not('.active').each(function(){
jQuery(this).children('.toggle-box-content').css('display', 'none');
});
gdl_toggle_box.find('h2').click(function(){
if( jQuery('.item').hasClass('active') ){
jQuery('.item').removeClass('active').children('.toggle-box-content').slideUp();
}else{
jQuery('.item').addClass('active').children('.toggle-box-content').slideDown();
}
});
You can use closest.
closest will match the first parent element that matches the selector traversing up the DOM tree.
Demo
$('h2.toggle-box-title').click(function(){
$(this).closest('li').addClass('active');
});
Try this.
$('h2.toggle-box-title').click(function(){
$(this).parent().addClass('newclass');
});
try this:
$('h2.toggle-box-title').click(function() {
$(this).parent('li').addClass('active');
});
On you click in the button you can use the event:
$("something").parent().find("h2.myClass");
// And if you want you can add class after you find you object
http://api.jquery.com/find/
Selecting an element's parent
In order to select an element parent, you can use the parent() function.
Try this:
$('h2.toggle-box-title').click(function() {
$(this).parent('li').addClass('active');
});
*to be more specific, you target the parent you would like to choose by specifying its selector
Check the jQuery API Documentation here
parent() - Get the parent of each element in the current set of matched elements,
optionally filtered by a selector.

Selecting all but the first child of parent with an ID and then applying action

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)

using jquery, how do I check if an element is visible or not?

I also need to find out all the elements inside a div, and check for their visibility. How to do it?
The first part of your question sounds like you want to find all the elements inside of a div. And then check for visibility.
To get all elements that are descendants of a div, use:
$('#myDiv *')
So to test each element, and act accordingly based on visibility:
$('#myDiv *').each(function() {
if( $(this).is(':visible') ) {
// code to run if visible
} else {
// code to run of not visible
}
})
You can select them using the :visible and :hidden pseudo-elements. For example, selects all the visible descendants of a <div>.
$("div :visible")...
Of you can do a test using is(). For example:
if ($("#someId").is(":visible")) { ...
$('#myElement').is(':visible');
Will return true or false
Use the :hidden and :visible selectors.
$("div:visible").hide();
$("div:hidden").show();
use the $(div :visible) selector to select all visible elements in the div. you may loook at http://api.jquery.com/visible-selector/ for more details.

Categories

Resources