javascript - 使用 JavaScript 仅查找可见元素

Question

我正在将一个 JQuery 项目转换为纯 JavaScript，但我遇到了以下代码。

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

我想也许按照这些思路可能会捕获所有可见元素(在我的项目列表项的情况下)，但我没有运气:

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

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

(block 已在 CSS 中设置)。有没有办法在一个变量中获取所有可见元素？

Answer 1

您可以将 nodeList 转换为数组 ( read more about it here )，这将允许您使用 Array.prototype.filter()获取可见元素:

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;
}

您在上面看到的isVisible 函数是从 jQuery 2.2.4 的源代码中提取的(3.X.X 版本与 IE 8 及以下版本不兼容)。