How can you act only on those elements that are in a particular view state in JQuery?

Question

I have a class that I need to perform some actions on but I only want to perform the action on those elements of the class that are currently shown.

For example, this code hides all elements of the pie class, whereas I only want to effect the elements that are currently shown and not act on the ones that are currently hidden:

$(".pie").click(function () 
{      
  $(".pie").hide;
});

(toggle is not what I'm looking for here)

Answer 1

You could use the :visible pseudo-selector.

So something like this:

$(".pie").click(function () 
{      
  $(".pie:visible").hide;
});

Answer 2

Another option is to use the is function and then the visible selector. Either or does the same but I like the is function because it is more human readable by others who may not be super familiar with selectors. Here is an example:

$(".pie").click(function () 
{      
if ($(".pie").is(':visible')){
  $(".pie").hide;
}
});