Jquery check element tag name - javascript

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.

Related

how to addClass to closest element

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

Add a class under a parent div

i want to add a class name 'disabled' under a parent div call 'anchorxx'
The disabled class div can be anywhere in the anchorXX divs
is it possible to do it with jquery ? i have no idea how i can manage to do it.
Thanks for your helps
a simple approach is
$(".anchor"+ id + " > div").addClass("disabled")
class will be added to the immediate div child element of .anchor1 div
Use jquery prefix selector and find the relevant element. Use addClass to add the required class
$('div[id^=anchor]').find('.whereYouwantToadd').addClass('someClass')
you can use jQuery's wildcard selector for this purpose.
link
you can find the anchor id and change the class of underlying div like this:
$('div[id*="anchor"]').child('div.fiche-left-disabled').addClass('disabled');
Add the 'disabled' class to its first children:
$('#anchor1').children().first().addClass('disabled')
For all anchors
$('div[id^="anchor"]').children().first().addClass('disabled')

Change css class on child element

I'm using jQuery to remove CSS class from my elements:
$('.input-group-addon').child($('.glyphicon.glyphicon-calendar').removeClass());
Now on same action immediately I remove that class I want to add myClass for example so I tried:
$('.input-group-addon').child().addClass('myClass');
But this doesn't work, my element stays with class="" instead of class="myClass".
You don't need to use children() at all:
$('.input-group-addon > .glyphicon.glyphicon-calendar').removeClass();
Add class back to all direct ancestors:
$('.input-group-addon > *').addClass('myClass');
.child() is not a jQuery function replace it by .children() :
$('.input-group-addon').children().removeClass();
$('.input-group-addon').children().addClass('myClass');
Or without children() method :
$('.input-group-addon .glyphicon.glyphicon-calendar').removeClass();
$('.input-group-addon .glyphicon.glyphicon-calendar').addClass('myClass');
Hope this helps.
You need to specify the class you want to remove..
$('.input-group-addon').child($('.glyphicon.glyphicon-calendar').removeClass("className"));
Currently, this
$('.input-group-addon').child($('.glyphicon.glyphicon-calendar').removeClass());
removes everything.

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 remove specific children

I have the following code :
$('.TopNotificationIcon span').remove();
Can I replace .TopNotificationIcon with this i.e only span exists inside this specific class.
This is the structure
<div class="TopNotificationIcon"><span>xxxxx</span></div>
On click of .TopNotificationIcon, span should be removed.
if you have click event for .TopNotificationIcon you can do something like this
$('.TopNotificationIcon').click(function(){
$('span',this).remove();
});
I would use the find() method, as it seems to be the fastest:
$("div.TopNotificationIcon").click(function() {
$(this).find("span").remove();
});
If you want to remove all span under TopNotification you can do this :
$('div').live('click', function(){
$(this).children('span').remove();
});
It will remove all children in a div.
Yes but youd need to change the line to:
$(this).children('span').remove();
js fiddle: http://jsfiddle.net/UNhhh/1/
Try this...
$('span').remove('.TopNotificationIcon');
This will remove all span elements with the class TopNotificationIcon and also child elements

Categories

Resources