假设我有多个 div
s 和同一个类 like
<div class="myDiv">1</div>
<div class="myDiv">2</div>
<div class="myDiv" style="display:none">3</div>
<div class="myDiv">4</div>
在这里我想定位具有 display:none
的 div这是第三个 div <div class="x" style="display:none">3</div>
我试过用这个
const elements = document.querySelectorAll('.myDiv');
const element = elements.find(element => element.style.display == "none");
console.log(element)
但是我得到一个错误提示
elements.find is not a function
我试过console.log
检查样式的元素样式
const elements = document.querySelectorAll('.myDiv');
elements.forEach(element => console.log(element.style.display));
它输出正确的结果
""
""
"none"
""
但为什么我试过的代码不起作用,为什么是 elements.find not a function
?
最佳答案
but i got an error saying
elements.find is not a function
那是因为 querySelectorAll
返回的 NodeList
不是一个数组,它是一个 NodeList
.您可以在执行 find
之前从中创建一个数组:
const elements = document.querySelectorAll('.myDiv');
const element = [...elements].find(element => element.style.display == "none");
// −−−−−−−−−−−−−^^^^−−−−−−−−^
console.log(element);
之所以可行,是因为 NodeList
实例是可迭代的,因此您可以使用扩展符号将它们扩展为数组文字。 (其他选项是 Array.from(elements)
、Array.prototype.slice.call(elements)
,或者只使用 for
循环。 )
您还可以将选择器从 .myDiv
缩小到 .myDiv[style]
,以便它只匹配 .myDiv
具有 style
属性。
不过,理想情况下,如果您可以更改某些内容,以便一开始就没有那种内联样式,我会这样做。例如,如果您使用类来隐藏元素:
<div class="myDiv">1</div>
<div class="myDiv">2</div>
<div class="myDiv hidden">3</div>
<div class="myDiv">4</div>
其中 hidden
定义为:
.hidden {
display: none;
}
然后您可以向浏览器询问您感兴趣的特定元素:
const element = document.querySelector(".myDiv.hidden");
关于javascript - 从元素的样式中定位多个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68508258/