使用 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 转换为数组（在此处阅读更多相关信息），这将允许您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.XX 与 IE 8 及以下版本不兼容）。