Adding class to link in JQuery - javascript

I have a anchor tag and would like to add a class to it in my document ready function. How do I do that?
Thanks,
Sachin

$(function() {
/* domReady */
$('a').addClass('yourclass');
});
of course if your link has an id use a more specific selector like
$('#yourlink').addClass('yourclass');

$(document).ready(function() {
$('#id1_of_a, #id2_of_a, #id3_of_a').addClass('myClass');
});

$(function() {
$('a:first').addClass('yourclass'); // suppose add class to first <a>
});
or
$('a:eq(1)').addClass('yourclass'); // suppose add class to second <a> and so on
or
$('a#some').addClass('yourclass'); // suppose add class to <a> have id 'some'

Related

Jquery - Can I undo event on previous element?

I wanted to ask, if possible to undo action on previous element which fired some event.
To illustrate my question we may use:
HTML :
jQuery :
$('a').on('click',function(e) {
$(this).addClass('ok');
// looking a way to manipulate previous <a> which fired event, before i will add class to $(this)
});
If I click first <a> it will add ok class. And all I want to remove this class from <a> on clicking second <a>.
So I click first <a> and it has ok class. Next I click second <a> and second <a> has now ok class but not first one (I called this action Undo).
And is I click third <a>, previous clicked <a> should not have ok class. I hope it's clear.
Just remove the class on the sibling elements
$('a').on('click',function(e) {
$(this).addClass('ok').siblings().removeClass('ok')
});
a {display: block}
.ok {color : red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
First
Second
Third
Fourth
Just add :
$('a.ok').removeClass('ok'); //if you have 'a' with class 'ok' just in this part of page
//OR
$(this).siblings().removeClass('ok');
Before :
$(this).addClass('ok');
So it will remove the class ok from all a tags then add it to the clicked one.
Hope this helps.
$('a').on('click',function(e) {
$(this).siblings().removeClass('ok');
$(this).addClass('ok');
});
.ok{
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
1
2
3
4
just add the following line after you add the class,
$("a").not(this).removeClass("ok");
so finally your click event function should look like,
$('a').on('click',function(e) {
$(this).addClass('ok');
$("a").not(this).removeClass("ok");
});
it will add ok class on the clicked item, and then remove ok class from any 'a' which is not the clicked one.
for your example you can do somthing like this:
$('a').on('click',function(e) {
$('a.ok').removeClass('ok'); // this will remove ok class from all a
$(this).addClass('ok');
// looking a way to manipulate previous <a> which fired event, before i will add class to $(this)
});
This is the Way to remove .ok class from previously clicked element
var prev_a = '';
$('a').on('click',function(e) {
$(this).addClass('ok');
$(prev_a).removeClass('ok');
prev_a = this;
});
I would add a class to all the links that may be clicked and then do the following:
var anchors = $('a.test'); // cache the links for better performance
anchors.on('click',function(e) {
anchors.removeClass('ok'); // remove the class from all anchors
$(this).addClass('ok'); // add the class to this anchor
});
.ok {color:green;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
test 1
test 2
test 3
test 4

Add class to div after another class is loaded

I have situation like this:
<body class="site pace-done">
<div class="container fade-in sppb-animated">
bla bla bla
</div>
</body>
What I want to do, is to add "fade-in sppb-animated" classes to div after "pace-done" class appear in body class. As long as "pace-done" class does not show in body class, "fade-in sppb-animated" should be removed. How to this is JS/Jquery?
I will be gratefull for any help with that.
I assume you are putting the class on body based on some logic present on server (else this is useless and rather you should use css selectors) .
so you can do some like i have done in this example https://jsbin.com/fidolexaja/edit?html,js,console,output
You can use $(window).load() event which fires after whole content is loaded.
$(window).load(function() {
$('.container').addClass('fade-in sppb-animated');
});
create a function that will add the class
$(document).on('addClass',function(){
// add class
}
);
add a function that will remove the class
$(document).on('removeClass',function(){
// remove class
}
);
Now, you can throw a event to tell when to add/remove class
$(document).trigger('addClass'); // to addClass
$(document).trigger('removeClass'); // to removeClass
Based on what you asked I made a script that will check if the body has an update to the class, if body has the class pace-done, it will update container and add the class fade-in. this uses setinterval and checks every 1 second
$(document).ready(function(){
$('.add').click(function(){
$('body').addClass('pace-done');
});
$('.remove').click(function(){
$('body').removeClass('pace-done');
});
setInterval(function(){
if ($("body").hasClass("pace-done")) {
$('.container').addClass('fade-in');
}else{
$('.container').removeClass('fade-in');
}
},1000);
});
http://codepen.io/ZetCoby/pen/mVXJQK
also I suggest that you update the container div at the same time with the body, do you have some sort of js that does something to the body? or are you using some external plugins that modify the body?

I want to add class active to <li> tag when <a> tag under that <li> tag is clicked

My index.html has the following DOM structure:
ul -> class:nav nav-tabs -> li -> a
I want to add class .active to an <li> element when an <a> element within that <li> is clicked. I have written this code, but it is not working:
main.js
var main = function(){
$("a").click(function() {
$('li').removeClass('.active');
$(this).addClass(".active");
});
};
$(document).ready(main);
Try this:
var main = function(){
$("a").click(function() {
//travel up the DOM tree to the "closest" li element, add "active" class to it
$(this).closest('li').addClass("active");
});
};
$(document).ready(main);
So you're close, but you have a couple of problems:
You want to apply the new active class to the containing li, not
to the a which is getting clicked
addClass() and removeClass() don't need to be prefixed with the ..
.name is a selector for finding elements with a class of name. addClass and removeClass expect class names, not selectors. To add a class of "active", you simply give it the string "active":
$(this).addClass('active')
You're also adding the class directly to the link which was clicked. If you want to add it to the containing <li>, use:
$(this).parent().addClass('active')
You are try to manipulate li, but you manipulate the a tag.
You need to use:
$(this).closest('li').addClass("active");
EDIT
And also not use . character as others mentioned
you need to mention class name without .
$(this).addClass("active");

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');
});​

destroy a particular li and it content after clicking a link

I have this
<ul>
<li id="any_list">Content to be destroyed</li>
</ul>
and this link:
remove the list "#any_list"
How can I write the deleteList() function in order to the list #any_list and its content?
You can get an element's parent using the parentNode property and you can remove a child element using the removeChild method. Therefore:
function deleteList(element) {
element.parentNode.removeChild(element);
}
It's better not to pollute the markup. Give the link an id first.
remove the list "#any_list"
Then simply
$('#delete_any_list').click(function(e){
$('#any_list').remove();
e.preventDefault();
});
http://jsfiddle.net/rMPdn/1/
Try this, example above: -
$("#any_list").each(function() {
$(this).remove();
});
First, add an id to your anchor and remove any inline Javascript:
remove the list "#any_list"
[it's considered poor practice these days to ever actually put any JS code directly into the markup].
Then, in your jQuery document.ready function add this:
$('#delete_any_list').click(function(ev) {
$('#any_list').remove();
});
See http://jsfiddle.net/alnitak/MbZpV/
$(function(){
$("#delete_any_list").click(function(e){
e.preventDefault();
$("#any_list").remove();
});
});
Delete any list

Categories