I have this class called .m-active that is used multiple times throughout my HTML.
Basically what I want to do is remove all instances of that class when a user clicks on an image (which does not have the m-active class) and add the m-active class to that image.
For instance in a Backgrid row you might have a click handler as follows:
"click": function () {
this.$el.addClass('m-active');
}
But you also want to remove that class from any rows to which it was previously added, so that only one row at a time has the .m-active class
Does anyone know how this can be done in javascript/jquery?
With jQuery:
$('.m-active').removeClass('m-active');
Explanation:
Calling $('.m-active') selects all elements from the document that contain class m-active
Whatever you chain after this selector gets applied to all selected elements
Chaining the call with removeClass('m-active') removes class m-active from all of the selected elements
For documentation on this specific method, see: http://api.jquery.com/removeClass/
Getting grasp of the whole selector thing with jQuery is challenging at first, but once you get it, you see everything in very different light. I encourage you to take a look into some good jQuery tutorials. I personally recommend checking out Codeacademy's jQuery track: http://www.codecademy.com/tracks/jquery
all answers point to remove the class from the DOM element. But if you are asking to remove the element itself you can user .remove() jquery method
$('.m-active').remove();
JQuery Remove Docs
In plain JavaScript (no jquery):
for (elem of document.getElementsByClassName("m-active")) {
elem.classList.remove("m-active");
}
Jquery-:
$("class").removeClass("your class");
javascript-:
Set the class name to nothing when you want to remove class in javascript!!!
document.getElementById("your id").className = "";
or
element.classList.remove("class name");
Specifically addressing the code block added to strengthen the quality of the question, and borrowing from jsalonen:
"click": function () {
$('.m-active').removeClass('m-active');
this.$el.addClass('m-active');
}
Related
I am stuck at one place in jquery, In have multiple dropdowns which is generating dynamically and have the same class name.
I am trying to trigger a click event on that class but that is affecting all of them.
What i want is just to point to the one which comes in a loop not to all
Something like this. ?
here is the jquery
if(olddate[0]==='')
{
$(".month").first().val($(".month option:first").first().trigger("change"));
}
if(olddate[1]==='')
{
$(".day").val($(".day option:first").trigger("change"));
}
if(olddate[2]==='')
{
$(".year").val($(".year option:first").trigger("change"));
}
To make the code work, you have to create "context" somehow. Context can be:
Wrap each dropdowns in an element has an ID. You can then do $('#id .month') to locate the node. See Descendant Selector
Save the root of the dropdown in a JavaScript variable. You can then do $('.class', rootNode) to locate it. See jQuery()
I would like a function that initializes all of my javascript/jquery controls (date pickers, sliders...).
This is mostly done using a class attribute to identify on which element to initialize the control.
Currently, I'm using a jQuery selector to get the elements.
If I understand correctly, every time I use a selector I'm searching the whole page. So if I have 10 controls and one selector for each control type, I will search the whole page 10 times.
Could there be a way to search the page only once ?
The idea would be to have a collection of css class names with the corresponding initialization method to call. Go through the page only once, and on each element if I find a corresponding class, call the initialization.
Hope I'm being clear enough.
hope this helps. The approach I would suggest would be to apply a class to every item that you want initialized, lets say "initializeMe" and then have specific classes for datepicker etc.
$(function(){
$(".initializeMe").each(function(){
if($(this).hasClass("className")){
// lets say the class name is datepicker and you initialize datepicker here.
}
});
});
Could you give each one of those elements the same class and use the .each() method?
For example:
$('.canInitialize').each(function(){
Initialize($(this));
});
I don't know whether that prevents the DOM search every time or not.
I know how to accomplish this if I can identify this element using a selector:
$("selector.class")
But what if my selector is the keyword this? Obviously $(this".class") isn't going to work, and I don't want to use $(this).children(".class") because then I need to extract the HTML of the element using .html(), and while I know that there will only be one element of this class in the selected element (I'm writing the HTML), JQuery doesn't, and it assumes that children() returns several elements when used with a class (at lease I think that's what it does, because
$(this).children(".class").html()
returns undefined).
Is there an other way I could do this?
Please feel free to ask for clarification, I understand this may not seem clear to some.
EDIT: some of you asked for clarification, so here it is. Let me rephrase the question: normally, when I ask JQuery to get me some elements, and give it a class as a selector it assumes I will get more than one element back and therefore $(".selector").html() doesn't work, because you can't get the HTML of several elements (at least that's my theory). Instead, I want it to recognise that in this case I am only getting 1 element back, and treat is as such. My restriction is that part of my selector is this. I hope that helped!
It isn't entirely clear to me what question you're asking so here are several different options:
To search for any subordinate tags (in the DOM tree with this as its root) that match a desired selector:
$(this).find(".myClass");
Or, if you're just trying to see if the this element has a particular class name, you can use:
if ($(this).hasClass("myClass")) {
// this element has the desired class
}
or, if the selector is more complicated than just a class, you can use .is() like this:
if ($(this).is("selector")) {
// this element matches desired selector
}
Really this isn't a selector, but I think you can do:
$(".class", this)
This is an example of supplying the context argument to the jQuery ($) function
For example (jsfiddle here),
HTML:
<div id="dis">hello
<div class="cls">
hi</div></div>
<div class="cls">
goodbye</div>
jQuery:
$(function () {
$('#dis').click(function () {
alert(
$('.cls', this).html());
});
});
will alert "hi" when the "dis" div is clicked.
Jquery is just a layer on top of JavaScript.
Just use raw javascript to get what you're looking for.
var childOfThis = this.querySelector('.myClass');
I am trying to hide/show a class of elements in a form depending on a drop-down menu choice made by the user. See: http://jsfiddle.net/3FmHK/2/
I am new to js and have two problems, so maybe they are obvious, bear with me.
1) I am modifying by the div id, so only the first element changes (and not in this fiddle for some reason, but it does in the project). However I want all the elements of a class to modify and I haven't been able to make that work. So how do I modify the style="display" for an entire class, rather than a single element?
2) The remove does not work for newly added element, when the form is returned with values in the project, they are removable. Using firebug, the code looks identical for the GET return generated elements vs the user added elements, as far as I can tell. Why does the remove function not work for newly added elements?
I recommend using jQuery for this if you can. You can use the .on() feature to bind actions ot newly created elements and use the class selector to .hide() all classes then .show() the currently selected on by id.
It would look something like this:
jQuery(document).ready( function() {
jQuery(document).on('click', '.classname', function() {
jQuery('.' + jQuery(this).attr('class') ).hide();
jQuery(this).show();
// Or you can use the following to show a specific ID element.
//jQuery('#idtoshow').show();
)};
});
This will hide all elements with the class name. You will need to include the jQuery library before your script. Although I am only using show and hide here, you can use .remove() as long as you bind your action with .on and not just .click. You need .on to bind to newly created elements.
http://api.jquery.com/on/
Hope this helps.
Try:
$(this).parent('div').first().remove();
I have four html elements that when clicked I want to have a specific class applied to. The problem is that that class is only for one of the four at any one time. I want to when one element is clicked have that class removed from the other three elements and applied to the one that was clicked. If I were to run a loop that removed that class from every single element before applying that class to the element clicked would there be an error on the elements that did not have that class?
#chrome dude, no there won't be any problem. Jquery takes care of null check. If you have class it will do it otherwise it won't do it.
No. The removeClass() function returns jQuery (the same jQuery object it was invoked on) and won't do anything if the class isn't present. You really only need to remove the class from the element that has it, though.
$('a').click( function() {
$('a.foo-class').removeClass('foo-class');
$(this).addClass('foo-class');
});
No.