Finding only visible elements using JavaScript

Question

I'm working on coverting a JQuery project to pure JavaScript and I'm stuck with the following bit of code.

$(".element-has-class:visible")

I thought perhaps something along these lines might work to catch all visible element (in the case of my project list items) but I've had no luck:

function functionName (){
  var elementsOnShow = document.getElementsByClassName('element-has-class').find(isVisible);
}

function isVisible(element) {
  return element.style.display === 'block';
}

(block has been set in the CSS). Is there anyway to get all visible elements within one variable?

And you're not getting any errors, for instance "NodeList.find is not a funtion" or something similar — adeneo
– adeneo, Commented Aug 14, 2016 at 18:21

blex · Accepted Answer · 2016-08-14 18:41:33Z

6

You can convert your nodeList to an Array (read more about it here), which will allow you to use Array.prototype.filter() to get the visible elements:

function functionName (){
  var myNodeList = document.getElementsByClassName('element-has-class'),
      myArray = [].slice.call(myNodeList),
      elementsOnShow = myArray.filter(isVisible);
}

function isVisible(element) {
  return element.offsetWidth > 0
      || element.offsetHeight > 0
      || element.getClientRects().length > 0;
}

The isVisible function you see above is extracted from jQuery 2.2.4's source code (version 3.X.X is not compatible with IE 8 and below).

edited Aug 14, 2016 at 18:41

answered Aug 14, 2016 at 18:24

blex

25.7k6 gold badges48 silver badges78 bronze badges

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

6 Comments

Matthijs Over a year ago

I would like to add that if the style has been set through classes, use getComputedStyle().display to also factor those in.

Jithu Rajan Over a year ago

According to api.jquery.com/visible-selector - 'Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero.' So I don't think checking display block will provide the exact behavior as :visible

blex Over a year ago

@JithuPRajan Alright, I found it in jQuery's source code. See changes

dedaumiersmith Over a year ago

Thanks so much @blex. For my purposes I think the original code you provided will do the trick but it's really helpful to me (as someone working on their first JavaScript app) to see both versions.

blex Over a year ago

@dedaumiersmith I'm glad I could help. Good luck with your project

|

Collectives™ on Stack Overflow

Finding only visible elements using JavaScript

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related