jQuery filter using CSS class/subclass

Question

Suppose I have this code:

<div class="notes">
    <div class="note">
         <div class="inner-content like"></div>
    </div>
    <div class="note">
         <div class="inner-content unlike"></div>
    </div>
    <div class="note">
         <div class="inner-content unlike"></div>
    </div>
</div>

What I want is to filter the like and unlike subclass.

I tried this code but no luck:

$("div.notes").filter(".note.note-inner>.like").hide();

The div that has like subclass is not hiding.

UPDATE

I want to hide the element with .note class not the one with the .inner-note like.

Kindly check my update. These note are dynamically created using loop from a model. — Mark
– Mark, Commented May 10, 2017 at 2:09

Michael Coker · Accepted Answer · 2017-05-10 02:15:23Z

7

you don't have a .note-inner and your selectors are wrong. .note.note-inner would be an element with class="note note-inner". And .notes is only 1 element, so $.filter() isn't going to find any other elements or the children in .notes

I think you meant $("div.notes").find(".note > .like").hide(); but you could also just do $('div.notes > .note > .like').hide() with or without the direct descendent selectors - they aren't necessary for the markup you shared.

If you want to remove a .note if it has a .like as a child, use $("div.notes").find(".like").closest('.note').hide();. That will find a .like inside of .notes, then find the closest ancestor with class .note and hide it.

$("div.notes").find(".like").closest('.note').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="notes">
  <div class="note">
         <div class="inner-content unlike">unlike</div>
    </div>
    <div class="note">
         <div class="inner-content like">like</div>
    </div>
    <div class="note">
         <div class="inner-content unlike">unlike</div>
    </div>
    <div class="note">
         <div class="inner-content unlike">unlike</div>
    </div>
</div>

edited May 10, 2017 at 2:15

answered May 10, 2017 at 2:08

Michael Coker

53.8k5 gold badges69 silver badges66 bronze badges

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

5 Comments

Mark Over a year ago

This works but I noticed that it left space between the filtered contents. Can I remove it instead of hide?

Michael Coker Over a year ago

@ChristianMark what do you mean space between the filtered contents? codepen.io/anon/pen/qmxREE

Mark Over a year ago

supposed I have a fixed size for each note and I need filter the one with like class, the element is now hidden but left a fixed space relative to the size I set.

Michael Coker Over a year ago

@ChristianMark show me a demo. If you $.hide() an element, it sets display: none which will remove it from the layout of the page. If you want to preserve the space, you want to change opacity or visibility instead of display to hide/show.

Mark Over a year ago

I got it based on your answer.

Spencer Wieczorek · Accepted Answer · 2017-05-10 02:09:02Z

1

.filter() applies to the elements you are going to filter, as such you want to apply it to the <div class="inner-content .."></div> elements:

$("div.notes > .note > .inner-content").filter(".like").hide();

Or simply

$("div.notes > .note > .inner-content.like").hide();

For removing the .note element you can just get the parent:

$("div.notes > .note > .inner-content.like").parent(".note").hide();

answered May 10, 2017 at 2:09

Spencer Wieczorek

21.7k7 gold badges46 silver badges57 bronze badges

Comments

luly · Accepted Answer · 2017-05-10 02:09:50Z

0

You can try this

 $(".note > .inner-content.like").hide();

 $(".note > .inner-content.like").show();

and

 $(".note > .inner-content.unlike").hide();

 $(".note > .inner-content.unlike").show();

I created a JSfiddle showing the filters with button toggles https://jsfiddle.net/jmbm2myu/3/

edited May 10, 2017 at 2:09

answered May 10, 2017 at 2:04

luly

6143 silver badges9 bronze badges

Collectives™ on Stack Overflow

jQuery filter using CSS class/subclass

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related