搜索 div 是不是包含类（vanilla js）

Posted 2023-02-23

【中文标题】搜索 div 是不是包含类（vanilla js）

【英文标题】：Search if div contains class (vanilla js)搜索 div 是否包含类（vanilla js）

【发布时间】：2018-06-25 15:05:29

【问题描述】：

我从香草 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 类 - 但控制台给了我这个：“未捕获的类型错误：无法读取未定义的属性 'contains' 在 checkHowManyEmpty”。知道为什么吗？

【问题讨论】：

fieldEmptyElements 是一个NodeList，使用fieldEmptyElements[i].classList.contains(..)。

为什么要在循环中自己执行检查，而不是让选择器引擎完成工作？无论如何，这就是它的优化目标。 document.querySelectorAll('div.cel.empty').length 将在一个干净简单的方法调用中告诉您在 div.cell 元素中是否有 empty 类的元素...

@Cbroe - 但是当我编写这个函数时：function checkHowManyEmpty() var fieldEmptyElements = document.querySelectorAll('div.cel.empty'); if(fieldEmptyElements.length >= 1) console.log('at least one element'); else if(fieldEmptyElements.length = 0) console.log('no empty elements'); 它会告诉我console.log 中是否有类为空的元素，但当没有这个类的元素时不会显示......

else if(fieldEmptyElements.length = 0) - 这是一个任务； comparison 运算符是== ...但是为什么你还需要一个 else-if 呢？如果长度不是>= 1，那么它一定是0……它不能变成负数。

@CBroe 是啊！在您回答之前，我看到了这个错误几秒钟：D 无论如何，当您使用比较时它会起作用！我使用它是因为我正在学习，这种符号更好地记住什么是什么；）谢谢！

【参考方案1】：

为什么要在循环中自己执行检查，而不是让选择器引擎完成工作？毕竟这就是它的优化目标......

document.querySelectorAll('div.cel.empty').length 将在一个简单的方法调用中告诉您在这些 div.cell 元素中是否存在类 empty 的元素。

您的 cmets 函数示例 - 不必要的 else-if 替换为简单的 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');
    

【参考方案2】：

我认为您实际上是打算这样做：（您应该访问集合的当前索引）

// ...
if (fieldEmptyElements[i].classList.contains('empty')) 
// ...

【参考方案3】：

fieldEmptyElements 是一个数组。要访问数组中的项目，您需要索引，在您的情况下是 i 变量。 对于循环的每次迭代，我都会增加 1。

if (fieldEmptyElements[i].classList.contains('empty'))

这样你就可以使用当前索引访问数组中的项目。

【参考方案4】：

document.querySelectorAll() 返回一个节点列表。然后，您正在查看节点列表的 classList 属性。这是错误的，因为您需要检查节点列表中的每个元素，然后检查其 classList。

在你的 for 循环中，你会使用你的 var i 来索引你的节点列表。

fieldEmptyElements[i].classList