Select only elements with a certain CSS attribute using JQuery

Question

Ok I have this code

 $("#search-results-all").children(".search-result-item").length;

Now, all I want there is to select only the .search-result-item elements that is only visible by using css attribute visibility:visible . Now how can i make this possible?

PS Sorry I don't know what to type in Google so I can start searching.

UPDATE...

well it worked by doing something like this

$("#search-results-all").children(".search-result-item:visible").length;

thank you for the answers

Answer 1

The following?

$("#search-results-all > .search-result-item").filter(function() {
   return $(this).css('visibility') == 'visible';
}).length;

http://api.jquery.com/filter/

Answer 2

Try this one:

$("#search-results-all .search-result-item").filter(function() {
  return $(this).css('visibility') == 'visible';
});

Answer 3

:visible Selector - Selects all elements that are visible.

$("#search-results-all").children(".search-result-item:visible").length; 

or

$("#search-results-all").children(".search-result-item")).is(':visible');