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

（已在CSS中设置block）。无论如何都要在一个变量中获取所有可见元素吗？

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及以下版本不兼容）。

使用JavaScript查找仅可见元素

1 个答案: