删除类并在单个元素上添加类

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

   });

Answer 1

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/

Answer 2

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