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?

P.S. 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

Andreas Wong · Accepted Answer · 2012-06-05 06:17:01Z

2

The following?

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

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

answered Jun 5, 2012 at 6:17

Andreas Wong

60.7k19 gold badges112 silver badges123 bronze badges

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

Comments

Blender · Accepted Answer · 2012-06-05 06:17:14Z

2

Try this one:

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

answered Jun 5, 2012 at 6:17

Blender

300k55 gold badges462 silver badges511 bronze badges

Comments

Pranay Rana · Accepted Answer · 2012-06-05 16:18:29Z

1

: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');

edited Jun 5, 2012 at 16:18

answered Jun 5, 2012 at 6:16

Pranay Rana

177k37 gold badges244 silver badges266 bronze badges

3 Comments

Netorica Over a year ago

I almost got this in the internet before i saw your answer.. thank you... this is correct and more clean

Andreas Wong Over a year ago

is returns a boolean, so I don't think you can use .length to it api.jquery.com/is

Niet the Dark Absol Over a year ago

"Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout." - Basically, this completely fails to handle the situation the OP is asking about...

Collectives™ on Stack Overflow

Select only elements with a certain CSS attribute using JQuery

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related