Finding class and adding removing class

Question

I have a page with following format.

<% (1..3).each do %>
<div class="each-message-content notification-message-content">
 <div class="">
  <div class="">
  </div>
 </div>
 <div class="">
 </div>
 <div class="">
 </div>
</div>
<div class="">
</div>
<div class="read-unread">
</div>
<% end %>

Clicking on read-unread I add a class read or unread. But when I check for if the class has read or unread class it always execute if block. Never enter in else block. How can I do this?

 $(document).on('click','.read-unread', function(){
        var $read_unread = $(this).closest('.notification-message-content');
        if($read_unread.hasClass('unread')){
            $read_unread.removeClass('unread');
            $read_unread.addClass('read');                
        } else if (($read_unread.hasClass('read'))){
            $read_unread.removeClass('read');
            $read_unread.addClass('unread');

        }

    });

See .toggleClass() (or toggleClassName(), not sure).

Virus721
– Virus721

2014-03-19 12:43:36 +00:00
Commented Mar 19, 2014 at 12:43 — Virus721
– Virus721, Commented Mar 19, 2014 at 12:43

user2652134 · Accepted Answer · 2014-03-19 12:49:38Z

1

Going with a definite selector might be even better

$(document).on('click','.read-unread', function(){
    $(this).prev().prev().toggleClass('read unread');   ;
});

Do note that one of the 'read' / 'unread' class needs to be already in place.

answered Mar 19, 2014 at 12:49

user2652134

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

3 Comments

A. Wolff Over a year ago

+1 even seems more portable: $(this).siblings('.notification-message-content').toggleClass('read unread');

asdfkjasdfjk Over a year ago

I think the problem is I am using a loop here. So same class appear 3 times. Thats why none of the answers are working for me. I think we have to find closest class name notification-message-content

user2652134 Over a year ago

@user3128796 If the structure is the same as you mentioned. My answer should work, as it does not depend on the css class.

Tsahi Asher · Accepted Answer · 2014-03-19 12:51:33Z

0

.closest() looks up the DOM tree. .notification-message-content is not up the tree, it is on the same level as .read-unread. Since we know it's above it, you can write

var $read_unread = $(this).prevAll('.notification-message-content');

which will look at all previous siblings in the tree.

answered Mar 19, 2014 at 12:51

Tsahi Asher

1,83417 silver badges30 bronze badges

1 Comment

asdfkjasdfjk Over a year ago

I think the problem is I am using a loop here. So same class appear 3 times. Thats why none of the answers are working for me. I think we have to find closest class name notification-message-content

Kiran · Accepted Answer · 2014-03-19 13:12:25Z

0

Try this:

$(document).on('click', '.read-unread', function () {
    var $read_unread = $(this).prevAll('.notification-message-content').first();
    $read_unread.toggleClass('unread read');
});

DEMO

edited Mar 19, 2014 at 13:12

answered Mar 19, 2014 at 12:43

Kiran

20.3k11 gold badges72 silver badges101 bronze badges

3 Comments

Kiran Over a year ago

@Satpal: Added toggleClass() solution also. Thanks Bro. :)

asdfkjasdfjk Over a year ago

I think the problem is I am using a loop here. So same class appear 3 times. Thats why none of the answers are working for me. I think we have to find closest class name notification-message-content

Kiran Over a year ago

@user3128796: Please find updated answer with demo link.

Collectives™ on Stack Overflow

Finding class and adding removing class

3 Answers 3

3 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related