remove class and add class on single element

Question

I have table type structure made of DIV elements.
I have made a expand/collapse type list.

I have this icon that i want to change if it expands and reset it back if I collapse the list. The two icons are linked to 2 classes.

$('.rowHead_but i', this ).removeClass('icon-double-angle-down');

and

$('.rowHead_but i', this ).addClass('icon-double-angle-up');

Okay it removes the class successfully and adds the new class, but it does it for all rows.

I only want this row to be affected.

What Im I doing wrong?

<div class="notificationDetail">
<div class="header">
    <div class="Collapse"> 
        <div class="rowHead1"><span>2014-10-10</span></div> 
        <div class="rowHead_but"><i class="icon-double-angle-down"></i></div> 
    </div>
  </div>
 <div class="header">
    <div class="Collapse"> 
        <div class="rowHead2"><span>2014-10-10</span></div> 
        <div class="rowHead_but"><i class="icon-double-angle-down"></i></div> 
    </div>
  </div>
 <div class="header">
    <div class="Collapse"> 
        <div class="rowHead3"><span>2014-10-10</span></div> 
        <div class="rowHead_but"><i class="icon-double-angle-down"></i></div> 
    </div>
</div>
</div>

JQuery code

    $('.notificationDetail').on('click','.header', function(e){
        e.stopPropagation();



        $(function() {

            var classTst_down = $('.rowHead_but i', this ).hasClass( "icon-double-angle-down" );
            var classTst_up = $('.rowHead_but i', this ).hasClass( "icon-double-angle-up" );

            if ( classTst_down ) {
                console.log('remove down');
                $(this ).removeClass('icon-double-angle-down');
                console.log('removed');
                $(this ).addClass('icon-double-angle-up');
                console.log('added');
            }
            if ( classTst_up ){
                console.log('remove up');
                $(this ).addClass('icon-double-angle-down');
                $(this ).removeClass('icon-double-angle-up');
            }
        });

   });

Sorry Matt, but no it does not work., I will try and inclide a snip of code — morne, Oct 16 '14 at 13:01
What is `this`? table, a div???? Show your HTML and code where are you using these statement — Satpal, Oct 16 '14 at 13:03
Show us the rest of your code .... how do we know what `this` is? **You know, we don't** — PeterKA, Oct 16 '14 at 13:06
What did you think `this` is in your example? How did you think it would refer to a single row? You are running this is a doc ready handler. How's it supposed to know which row you are referring to? — Matt Burland, Oct 16 '14 at 13:07
This may be quite helpful to you: http://stackoverflow.com/questions/4195970/what-does-this-mean; at the first use of `this`, use `console.log( this )` to see that `this` is not what you think it is. — PeterKA, Oct 16 '14 at 13:08
what's `.header`? Post a fiddle (or a stack snippet) so people can actually see what you are doing. In your case `this` will be the element with the `header` class that was clicked. Also, you don't need the `$function()` part. That makes no sense. — Matt Burland, Oct 16 '14 at 13:10
What is the user supposed to be clicking on? The span? The `.collapse` div? — Matt Burland, Oct 16 '14 at 13:15
Why would you just randomly put `this` there and assume it would work??? If I want to target the next row do I put `next`? — Derek 朕會功夫, Oct 16 '14 at 13:19

score 3 · Accepted Answer · answered Oct 16 '14 at 13:20

From what you understand is that you don't actually want to bind event handler to .header container, but rather to individual .Collapse items. if so you can then dramatically simplify your code if you use toggleClass:

$('.notificationDetail').on('click', '.Collapse', function (e) {
    e.stopPropagation();
    $('.rowHead_but i', this).toggleClass('icon-double-angle-down icon-double-angle-up');
});

http://jsfiddle.net/7h1gn4cx/

score 0 · Answer 2 · answered Oct 16 '14 at 13:22

0

Seems overly complicated. Why do you need two classes? - try something like:

$('.notificationDetail .header').click(function() {
    var $el = $(this).find('.rowHead_but i');
    $el.toggleClass('icon-double-angle-down');
});

answered Oct 16 '14 at 13:22

johnnyd23

1,555
2
12
22

remove class and add class on single element

2 Answers2