Question

我有多个div元素，它们是动态生成的。我想使用javascript访问第一类名称。到目前为止，我做到了：

function changeFilter(cat) {
   console.log(cat);
   var x = {};
   x = document.getElementsByClassName("itemProductList");
   console.log(x);
   if (cat == x) {
     console.log("yes");
   } else {
     console.log("nope");
   }
}

在控制台中，我得到了：

div.Desserts.itemProductList.item-list.col-md-3.col-lg-3.col-xs-12.col-sm-4,

动态生成的div元素如下所示：

<div class="{{product.category}} itemProductList item-list col-md-3 col-lg-3 col-xs-12 col-sm-4" style="float:left; min-height:370px; margin-bottom:20px;" ng-repeat="product in store.products | filter:search | filter:category">

如何从上方获得Deserts？

有人可以帮我吗？

Answer 1

您可以在一个空格上拆分元素的类名，并获得该数组的第一部分。

document.getElementsByClassName返回一个HTMLCollection，您可以使用for循环对其进行迭代。

for(var i=0; i<x.length; i++){
    console.log(x[i].className.split(" ")[0]);
}

Answer 2

使用classList属性并获取第一个元素。

函数document.getElementsByClassName()将返回一个可能包含许多项目的可迭代对象，因此您可以使用Array.forEach()对其进行迭代，但是必须首先将结果转换为数组：

const divs = document.getElementsByClassName("itemProductList");
[...divs].forEach(div => console.log(div.classList[0]));

<div class="Desert itemProductList item-list col-md-3 col-lg-3 col-xs-12 col-sm-4">
<div class="Desert itemProductList item-list col-md-3 col-lg-3 col-xs-12 col-sm-4">
<div class="Desert itemProductList item-list col-md-3 col-lg-3 col-xs-12 col-sm-4">

如何获取使用javascript动态添加的一流名称

2 个答案: