如何使用 JavaScript 测试和计算动态编号的类名

Question

我的对象是这样的：

var text = document.getElementsByClassName('decode-text')[0];

这是一个包含 html 个元素的列表，如下所示：

<div class="decode-text">
    <div class="cycleText">
        <div class="cycle-0"> 
            <div class="text-animation">hey</div>
        </div>
        <div class="cycle-1"> 
            <div class="text-animation">you</div>
        </div>      
        <div class="cycle-2"> 
            <div class="text-animation">guys</div>
        </div>
    </div>
</div>

我只会使用 indexof 但想了解为什么 .contains returns 错误？

text.classList.contains('cycleText'); = false // why

关于获取此节点列表中 'cycle-*' class 个名称的数量还有什么建议吗？

Answer 1

您可以使用 css 属性选择器实现此目的。 ^ 表示 "starts with":

document.querySelectorAll('[class^="cycle-"]');

Answer 2

classList 是分配给当前 DOM 元素的类列表，不包括其子元素的类。

列表中唯一的条目是 decode-text。

如何使用 JavaScript 测试和计算动态编号的类名

How to test for and count dynamically numbered classnames with JavaScript

javascript

classname

getelementsbyclassname