[已解决]如何变量数组中根据class类名获取序号

只是那个人

1. <ul class="process-nav">
   
2.                 <li class="process P">( P )</li>
   
3.                 <li class="process W">( W )</li>
   
4.                 <li class="process T">( T )</li>
   
5.                 <li class="process A">( A )</li>
   
6.                 <li class="process R">( R )</li>
   
7.                 <li class="process I">( I )</li>
   
8.                 <li class="process L">( L )</li>
   
9.               </ul>

复制代码

我有以上HTML

1. var process = document.querySelectorAll(".process")

复制代码

我在JS中根据class获取了一个数组变量

现在我想根据class类名获取对应数组序号应该怎么书写

举例如果我想获得class="process R“它在process变量中的序号

我自己书写的代码是console.log(process.indexOf("process.W"))但是不对

最佳答案

月排行榜 / 总排行榜

FishC

2024-3-11 10:53:57

你可以使用classList属性获取元素的类名列表，然后遍历数组进行比对，找到匹配的类名并返回序号。代码示例如下：

1. var process = document.querySelectorAll(".process");
   
2. var targetClass = "R";
   
3. var index = -1;
   
4. 
   
5. for (var i = 0; i < process.length; i++) {
   
6.   if (process[i].classList.contains(targetClass)) {
   
7.     index = i;
   
8.     break; // 找到匹配的类名后跳出循环
   
9.   }
   
10. }
    
11. 
    
12. console.log(index);

复制代码

在这个例子中，我们首先定义了一个目标类名`targetClass`，然后通过遍历`process`数组，使用`classList.contains()`方法检查每个元素是否包含该类名，如果找到匹配的类名，就将对应的索引值赋给`index`变量，并使用`break`语句跳出循环。最后，我们通过`console.log()`输出`index`的值来得到所需的序号。

希望能帮助到你！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

跳转到最佳答案楼层

FishC

你可以使用classList属性获取元素的类名列表，然后遍历数组进行比对，找到匹配的类名并返回序号。代码示例如下：

1. var process = document.querySelectorAll(".process");
   
2. var targetClass = "R";
   
3. var index = -1;
   
4. 
   
5. for (var i = 0; i < process.length; i++) {
   
6.   if (process[i].classList.contains(targetClass)) {
   
7.     index = i;
   
8.     break; // 找到匹配的类名后跳出循环
   
9.   }
   
10. }
    
11. 
    
12. console.log(index);

复制代码

在这个例子中，我们首先定义了一个目标类名`targetClass`，然后通过遍历`process`数组，使用`classList.contains()`方法检查每个元素是否包含该类名，如果找到匹配的类名，就将对应的索引值赋给`index`变量，并使用`break`语句跳出循环。最后，我们通过`console.log()`输出`index`的值来得到所需的序号。

希望能帮助到你！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。