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(), .hasClass() and .removeClass(). Or use .not() instead of .hasClass(). — Joe
– Joe, Commented Jul 8, 2013 at 11:17
see this stackoverflow.com/questions/5995628/adding-attribute-in-jquery to remove attribute add removeAttr() before the attr() — L10
– L10, Commented Jul 8, 2013 at 11:19

Guilherme Oderdenge · Accepted Answer · 2013-07-08 11:21:34Z

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 8, 2013 at 11:21

Guilherme Oderdenge

5,0316 gold badges66 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Prassanna D Manikandan · Accepted Answer · 2015-09-23 08:15:35Z

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, 2015 at 8:15

answered Sep 22, 2015 at 14:24

Prassanna D Manikandan

6451 gold badge6 silver badges16 bronze badges

Comments

Paritosh · Accepted Answer · 2013-07-08 11:18:29Z

1

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

And addClass for else part.

answered Jul 8, 2013 at 11:18

Paritosh

11.7k5 gold badges64 silver badges80 bronze badges

Comments

abipc · Accepted Answer · 2013-07-08 11:18:35Z

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 8, 2013 at 11:18

abipc

1,0352 gold badges17 silver badges36 bronze badges

Comments

Hieu Nguyen · Accepted Answer · 2013-07-08 11:18:48Z

1

This should do it:

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

answered Jul 8, 2013 at 11:18

Hieu Nguyen

8,6332 gold badges38 silver badges45 bronze badges

Comments

coolguy · Accepted Answer · 2013-07-08 11:19:49Z

1

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

answered Jul 8, 2013 at 11:19

coolguy

7,9549 gold badges48 silver badges72 bronze badges

Comments

user2502452 · Accepted Answer · 2013-07-08 11:26:31Z

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 8, 2013 at 11:26

user2502452

311 silver badge2 bronze badges

Collectives™ on Stack Overflow

Add the Class Dynamically using Jquery?

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related