我正在努力将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
)。无论如何都要在一个变量中获取所有可见元素吗?
答案 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及以下版本不兼容)。