CODEWITHSUNDEEP
javascriptjquerycss
Cainnech
Cainnech

Reputation: 459

Jquery hiding elements with specific classname that do not match a certain condition

I have a page which has multiple elements that all have the same classname.

Some of them are being repositioned and when I submit the page I would like to hide the elements which are at a position of top: 0;

I've been looking at some suggestions and I've tried something like this:

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

But appearantly that's not working :-)

Anybody else has an idea on how to accomplish this?

Thanks

Upvotes: 3

Views: 152

Answers (3)

VVV
VVV

Reputation: 7593

There is no selector for this but this can be accomplished with by looping the elements and checking for the top position.

Something like this.

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

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

Here's a fiddle

Upvotes: 0

Mahmoud Wagdi Al-Awadi
Mahmoud Wagdi Al-Awadi

Reputation: 178

Loop over every element with the class then check for its css property:

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

Upvotes: 0

epascarello
epascarello

Reputation: 207511

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

You want to use filter()

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

Upvotes: 5

Related Questions