jQuery div removeClass() / addClass() - javascript

I have a particular div element with "testDiv" class;
<div class="testDiv">Content</div>
Now using jQuery I want to remove the testDiv class and add a different class;
jQuery('div').removeClass('testDiv');
Now how can I add a class to this particular div that got its class remove, i fear that if I do jQuery('div').addClass('newClass'); it will add a class to all the other divs present in the page.

how about:
jQuery('div.testDiv').addClass('newClass').removeClass('testDiv');

jQuery('div.testDiv').toggleClass("testDiv newClass")

Related

Hide class by default, show that class when clicking a link

How can I have the class on my page .showhide to be hidden by default, but when you click on a link, the contents of .showhide are displayed?
Thank you for your time.
You can use the functions addClass and removeClass to add or remove a class to your element.
For example
$('#myId').addClass('myClass');
or
$('#myId').addClass('myClass');
where
.myClass { display: none; }
is, would add or remove the class myClass to an element with the id myId. Try this fiddle.
Update: The fiddle is updated to remove a div with a link.

Add the Class Dynamically using Jquery?

How can i add the class selectors dynamically to the img tag. For Example:
img tag should be inside the anchor tag then only the class name:sample should add dynamically whichever anchor tag contain img like,
Before:
<img src="image.png"/>
After:
<img src="image.png" class="sample"/>
If already image tag contain class then remove that class and the new class is possible in jquery. I am not sure, how can i do this in jQuery.
Any suggestion would be great.
Thanks,
vicky
You just need to toggle your class. To do this, see:
$("img").toggleClass("border");
I made an example for you on CodePen. Just click here.
$(document).ready(function(){
$('your selector').addClass('sample'); //It can be select,img,a,etc.. });
Be specific in your tag for choosing. I use in CakePHP 3.x Date HtmlHelper field and it worked like a magic.
if($('a[href=image.png] > img').hasClass('sample')){
$('a[href=image.png] > img').removeClass('sample');
}
And addClass for else part.
This can be done easily via jQuery.addClass and jQuery.removeClass APIs..
Add Class - http://api.jquery.com/addClass/
Remove Class - http://api.jquery.com/removeClass/
This should do it:
$('a img').removeClass().addClass('example')
$(document).ready(function(){
$('a >img').addClass('sample'); //direct descendant of a
});
HTML code:
<img id="testImg" src="xyz.jpg" />
css code:
.displayNone{
display:none;
}
jquery - to add class
`$("#testImg").addClass("displayNone");`
jquery - to remove class
$("#testImg").removeClass("displayNone");

Add/remove/replace the class for html element

I'm curious about how can I add/remove class to html element? It seems to be a very simply operation. But it turned out that the method removeClass was not found for some reason.
So what I need to do is replace or remove an old one and add a new one to an element. How can I do that?
The removeClass method is included in jQuery, unless you've overridden it.
$("#someElement").removeClass("someclass");
Use AddClass to add class, removeClass to remove, toggleClass to toggle (removes class if exists or adds if does not exist) :)
If you use jQuery make sure it is loaded before your script and then use like this:
$('p').removeClass('myClass yourClass') // remove class
$("p").addClass("myClass yourClass"); // add class
if you want to use pure JS here you are : How do I add a class to a given element?
var d = document.getElementById("div1");
d.className = d.className + " otherclass";
Use addClass and removeClass
<div class="firstClass" id="uniqeId"></div>
$("div#uniqeId").removeClass("firstClass");
$("div#uniqeId").addClass("Some_Other_Class");
$('#elementId').addClass('className');
$('#elementId').removeClass('className');
See: http://api.jquery.com/category/manipulation/class-attribute/
Since your question is tagged with jquery, there are two functions you can use:
$(element).removeClass('oldclass')
$(element).addClass('newclass')
Without jQuery and on modern browsers you can work with the classList property:
element.classList.remove('oldclass')
element.classList.add('newclass')
You can use .toggleClass() to add/remove simultaneously, i mean switch from one class to another:
Description from the docs
Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the switch argument.
if this is your html:
<div class="aaa">Some text.</div>
then this script:
$('div.aaa').toggleClass('bbb');
will output like this:
<div class="aaa bbb">Some text.</div>
Or if you do this:
$('elem').toggleClass('aaa bbb');
//--------------------^^^---here this class will be added/removed

Add class to a div via Jquery

I have the div which is generated when page loads as below.
<div class="redactor_ redactor_editor"></div>
How can I add a class .example onto it via jquery like below?
<div class="redactor_ redactor_editor example"></div>
Thank you very much!
Try addClass this,
$('.redactor_').addClass('example');
just select element using any selector
$(selector).addClass('example');
demo
you can add class to element by using the .addClass()
syntex
.addClass( className )
className One or more class names to be added to the class attribute of each matched element.
so now this is you want
$('.redactor_ redactor_editor').addClass('example');
try this :
<pre>
$(window).load(function () {
$('.redactor_ redactor_editor').addClass('example');
});
</pre>
reference :
addClass
You can set the class regardless of what it was by using .attr() like this,
If the html is like this,
<div class="redactor_ redactor_editor"></div>
then the selector will be like the following,
$(document).ready(function() {
$('.redactor_redactor_editor').attr('class', 'redactor_redactor_editor example');
});
Since your div tag's class name has a space after the underscore sign(i.e. redactor_ ) the following way must be applied to select the element.(<div class="redactor_ redactor_editor"></div>)
$(document).ready(function() {
$("div[class='redactor_ redactor_editor']").attr('class', 'redactor_ redactor_editor example');
});
If you are looking for adding a new css class to an element that already has a class then-
DEMO
HTML-
<div class="one">example</div>​
CSS-
.one{color:red;}
.two{color:green}​
jQuery-
$(function(){
$('.one').addClass('two');
});​
If you are looking for removing the old css class and add a new class-
DEMO
jQuery-
$(function() {
$('.one').removeClass('one').addClass('two');
});​

Add class to parent div

I am working with the google maps drawing manager. They don't put id's or class names on the drawing tools button bar so I'm trying to do this myself.
First I want to remove the circle button which the below works fine, but I want to add my own button so need to add a class name to the parent div "gmnoprint" but google has about 5 div's all with the same class name. I just want to add it to the one where the circle button was found.
<div class=gmnoprint"></div>
<div class=gmnoprint"></div>
<div class=gmnoprint"></div>
<div class=gmnoprint">
<div>
<div> <== This is what I found in my search
<span>
<div>
<img></img>
</div>
</span>
</div>
</div>
</div>
I am able to find the element I want and remove it, but adding a class to its wrapper div is proving a bit difficult for me.
This works for removing the button
$(".gmnoprint").each(function(){
$(this).find("[title='Draw a circle']").remove();
});
This doesn't work.. Just add's the class to all ".gmnoprint" div's
$(".gmnoprint").each(function(){
$(this).find("[title='Draw a circle']").remove().parent().addClass("test");
});
remove() removes the element from the DOM and returns the free-standing jquery object which has no connection to the DOM at all. A call to parent() after calling remove() is incorrect and that likely is the cause for your issue.
Try splitting your statements to:
var toRemove = $(this).find("[title='Draw a circle']");
toRemove.parent().addClass("test");
toRemove.remove();
You can use jQuery insertAfter and out your button after that default button then remove it.
$(".gmnoprint").each(function(){
var defBtn = $(this).find("[title='Draw a circle']");
$('<button class="my-button" />').insertAfter(defBtn);
defBtn.remove();
});
Or use jQuery after like this:
$(".gmnoprint").each(function(){
$(this)
.find("[title='Draw a circle']")
.after($('<button class="my-button" />'))
.remove();
});
You can use child selector to target the elements
$(".gmnoprint > div > div").addClass('myClassName');
At that point you could replace the html of the whole div , or find the span and replace it's inner html. Using html() method you don't need to use remove() as it will replace all contents of the element(s)
$(".gmnoprint > div > div").addClass('myClassName').find('span').html('<newButton>');
API Reference : http://api.jquery.com/child-selector/

Categories