JQuery hides elements with a specific class name that do not match a specific condition

Question

I have a page with several elements that all have the same class name.

Some of them move, and when I submit the page, I would like to hide the elements that are at the top: 0;

I was looking for some suggestions and I tried something like this:

$('.myClass').not($('.myClass').css('top', '0')).fadeOut(300);

But apparently it doesn't work :-)

Does anyone else have an idea on how to do this?

thank

+3

Cainnech 03 Apr 17 at 13:30

3 answers

There is no selector for this, but it can be achieved by looping through the elements and checking for top position .

Something like that.

$.each($('.myClass'), function(i, el) {
  var position = $(el).position();

  if (position.top === 0) {
      $(el).hide();
  }
});

0

VVV 03 Apr 17 at 13:37

Loop through each element with a class, then check its css property:

$('.myClass').each(function(){
  if($(this).css('top')==='0'){
     $(this).fadeOut(300);
  }
});

0

epascarello · Accepted Answer · 2017-04-03T13:37:28+0000

You are setting the top of the position, not filtering the set.

You want to use filter ()

$( '.myClass' )
  .filter(function() {
    return $(this).css('top') === "0px";
  }).fadeOut(300);