[英]Search if div contains class (vanilla js)
我从香草JS开始,所以请不要生气;)尝试编写井字游戏。
我有这个HTML:
<div class="container">
<div class="row">
<div class="cel empty" id="a1">
<p>x</p>
</div>
<div class="cel empty" id="a2">
x
</div>
<div class="cel empty" id="a3">
x
</div>
</div>
<div class="row">
<div class="cel empty" id="b1"> x</div>
<div class="cel empty" id="b2"> x</div>
<div class="cel empty" id="b3"> x</div>
</div>
<div class="row">
<div class="cel empty" id="c1"> x</div>
<div class="cel empty" id="c2"> x</div>
<div class="cel empty" id="c3">x </div>
</div>
</div>
还有这个JS:
var fieldEmptyElements = document.querySelectorAll('div.cel');//pobieram divy które zawierają klasę empty
window.addEventListener('load', checkHowManyEmpty);//po załadowaniu strony wczytuje funkcję o nazwie checkHowManyEmpty
//funkcja ma za zadanie sprawdzić jak dużo pól div ma klasę empty
function checkHowManyEmpty(){
for(var i=0, max=fieldEmptyElements.length; i<max; i++){
if(fieldEmptyElements.classList.contains('empty')){
alert('there is one element with empty class');
}
else{
alert('no element with empty class');
}
}
}
函数需要检查是否有任何元素具有类EMPTY-但是控制台给了我这个:“未捕获的TypeError:在checkHowManyEmpty处无法读取未定义的属性'包含'”。 知道为什么吗?
为什么要循环执行自己的检查,而不是让选择器引擎来做呢? 毕竟,这就是它的优化目标...
document.querySelectorAll('div.cel.empty').length
将通过一个简单的方法调用告诉您div.cell
元素中是否存在empty
类的元素。
注释中的函数示例-不必要的else-如果替换为简单的else:
function checkHowManyEmpty() {
var fieldEmptyElements = document.querySelectorAll('div.cel.empty');
if (fieldEmptyElements.length >= 1) {
console.log('at least one element');
} else {
console.log('no empty elements');
}
}
我认为您实际上是想这样做:(您应该访问集合的当前索引)
// ...
if (fieldEmptyElements[i].classList.contains('empty')) {
// ...
fieldEmptyElements是一个数组。 要访问数组中的项目,您需要索引(在您的情况下为i变量)。 对于循环的每次迭代,我都会增加1。
if (fieldEmptyElements[i].classList.contains('empty'))
这样,您可以使用当前索引访问数组的项目。
document.querySelectorAll()返回节点列表。 然后,您正在查看节点列表的classList属性。 这是错误的,因为您需要检查节点列表中的每个元素,然后检查其classList。
在for循环中,您将使用var i索引节点列表。
fieldEmptyElements [i] .classList
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.