Add the Class Dynamically using Jquery?

Question

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:

<a href="image.png"><img src="image.png"/></a>

After:

<a href="image.png"><img src="image.png" class="sample"/></a>

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

Just use: [`.addClass()`](http://api.jquery.com/addClass/), [`.hasClass()`](http://api.jquery.com/hasClass/) and [`.removeClass()`](http://api.jquery.com/removeClass/). Or use [`.not()`](http://api.jquery.com/not/) instead of `.hasClass()`. — Joe, Jul 08 '13 at 11:17
see this http://stackoverflow.com/questions/5995628/adding-attribute-in-jquery to remove attribute add removeAttr() before the attr() — L10, Jul 08 '13 at 11:19

score 6 · Accepted Answer · answered Jul 08 '13 at 11:21

6

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.

answered Jul 08 '13 at 11:21

Guilherme Oderdenge

4,935
6
61
96

Prassanna D Manikandan · Answer 2 · 2015-09-23T08:15:35.987

2

$(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.

edited Sep 23 '15 at 08:15

answered Sep 22 '15 at 14:24

Prassanna D Manikandan

645
1
6
16

score 1 · Answer 3 · answered Jul 08 '13 at 11:18

1

if($('a[href=image.png] > img').hasClass('sample')){
    $('a[href=image.png] > img').removeClass('sample');
}

And addClass for else part.

answered Jul 08 '13 at 11:18

Paritosh

11,144
5
56
74

score 1 · Answer 4 · answered Jul 08 '13 at 11:18

1

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/

answered Jul 08 '13 at 11:18

abipc

997
2
13
35

score 1 · Answer 5 · answered Jul 08 '13 at 11:18

1

This should do it:

$('a img').removeClass().addClass('example')

answered Jul 08 '13 at 11:18

Hieu Nguyen

8,563
2
36
43

score 1 · Answer 6 · answered Jul 08 '13 at 11:19

1

$(document).ready(function(){
    $('a >img').addClass('sample'); //direct descendant of a
});

answered Jul 08 '13 at 11:19

coolguy

7,866
9
45
71

score 0 · Answer 7 · answered Jul 08 '13 at 11:26

0

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");

answered Jul 08 '13 at 11:26

user2502452

31
1
2

Add the Class Dynamically using Jquery?

7 Answers7