How to access the class of the child element in jquery?

Question

I want to change the class of the child element to be "fa fa-minus-circle" when the user click on the header

<div class="case-study-header">
<i class="fa fa-plus-circle"></i> Case Study Header </div>

Code

 $('.case-study-header').click(function(){
           var state  = $('.case-study-header').children().attr('class');
           state.replace("fa fa-plus-circle", "fa fa-minus-circle");
            });

state.repalce : you maybe mean "replace" ? – Anthony Granger Aug 24 '15 at 07:06 — Anthony Granger, Aug 24 '15 at 07:06
Check here: https://jsfiddle.net/571ego8y/ – Umesh Sehta Aug 24 '15 at 07:14 — Umesh Sehta, Aug 24 '15 at 07:14

score 3 · Answer 1 · answered Aug 24 '15 at 07:06

3

 $('.case-study-header').click(function(){
     $('.case-study-header').children().attr('class', 'fa fa-minus-circle');         
  });

Set it again, it over-rides automatically.

answered Aug 24 '15 at 07:06

Suresh Atta

120,458
37
198
307

score 3 · Accepted Answer · answered Aug 24 '15 at 07:07

3

You have a few issues:

Change repalce to replace.
Change the whole logic to something simpler.

I guess you might need this:

$('.case-study-header').click(function(){
  var state  = $('.case-study-header').children().attr('class');
  state.replace("fa fa-plus-circle", "fa fa-minus-circle");
});

Instead of the above, use:

$('.case-study-header').click(function () {
    $('.case-study-header').children().attr('class', 'fa fa-minus-circle');         
});

answered Aug 24 '15 at 07:07

Praveen Kumar Purushothaman

164,888
24
203
252

You're reputation score is high enough for you to know that answering a duplicate question when you should be closing/deleting it doesn't look good. I can't speak for the downvoter though, but to me it looks like fishing for points. Same goes for everyone else answering when there's already a correct answer. – Yes Barry Aug 24 '15 at 07:19
@mmmshuddup Fine. I agree with you. Will make sure to answer only the non-duplicate questions. Thanks. – Praveen Kumar Purushothaman Aug 24 '15 at 07:21

score 1 · Answer 3 · answered Aug 24 '15 at 07:07

You can use .toggleClass()

$('.case-study-header').click(function() {
  $(this).children('i').toggleClass('fa-plus-circle fa-minus-circle');
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="case-study-header">
  <i class="fa fa-plus-circle"></i> Case Study Header
</div>

score 1 · Answer 4 · answered Aug 24 '15 at 07:08

1

You can use toggleClass method as below:

$('.case-study-header').click(function(){
       var state  = $('.case-study-header').children().toggleClass('class', 'fa-plus-circle fa-minus-circle');         
        });

answered Aug 24 '15 at 07:08

Mahesh Thumar

4,257
5
22
30

score 1 · Answer 5 · answered Aug 24 '15 at 07:11

Try this: select all children having either fa-plus-circle or fa-minus-circle and toggle class.

$('.case-study-header').click(function(){
   var $children = $('.case-study-header').children('.fa-plus-circle, .fa-minus-circle');
   $children.toggleClass('class', 'fa-plus-circle fa-minus-circle');         
});

How to access the class of the child element in jquery?

5 Answers5