使用JavaScript查找仅可见元素

时间:2016-08-14 18:18:31

标签: javascript jquery find

我正在努力将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)。无论如何都要在一个变量中获取所有可见元素吗?

1 个答案:

答案 0 :(得分:4)

您可以将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及以下版本不兼容)。