Javascript 如何根据类中的属性位置获取元素的特定名称

我使用这段代码根据类属性列表中每个类的属性位置获取元素中每个类的特定名称

例如，如果我想在div名称中获取第二个类

此代码将返回所有类名

 var SecondclassName = $(this).attr('class');

但我只需要第二个

$（“#横幅消息”）。在（'click'，function（）上{
var FirstclassName=$（this.attr（'class'）；
//var SecondclassName=$（this.attr（'class'）；
//var ThirdclassName=$（this.attr（'class'）；
log（FirstclassName）；
});
#横幅消息{
背景：#ccc；
边界半径：4px；
填充：20px；
字体大小：25px；
文本对齐：居中；
过渡：均为0.2s；
保证金：0自动；
宽度：300px；
}

是一个DOMTokenList，它是一个类似数组的构造，位于包含所有类的元素上


$（“#横幅消息”）。在（'click'，function（）上{
log（this.classList[1]）；
});
#横幅消息{
背景：#ccc；
边界半径：4px；
填充：20px；
字体大小：25px；
文本对齐：居中；
过渡：均为0.2s；
保证金：0自动；
宽度：300px；
}
JavaScript在所有元素上都有一个内置属性
classList
——既然您想要第二个属性，请使用
[1]
。使用destructuring获取所有三个：


$（“#横幅消息”）。在（'click'，function（）上{
var[FirstclassName，SecondclassName，ThirdclassName]=this.classList；
log（FirstclassName）；
log（SecondclassName）；
console.log（ThirdclassName）；
var second=this.classList[1]；
console.log（第二个）；
});
#横幅消息{
背景：#ccc；
边界半径：4px；
填充：20px；
字体大小：25px；
文本对齐：居中；
过渡：均为0.2s；
保证金：0自动；
宽度：300px；
}
您还可以使用
attr（）
分割得到的结果，并通过每个元素的索引对其进行寻址，如下所示：

$("#banner-message").on('click', function(){
  var array = $(this).attr('class').split(' ');
  var FirstclassName = array[0]
  // var SecondclassName = array[1];
  // var ThirdclassName = array[2];
  console.log(FirstclassName);
});

但是建议使用
classList
，因为它已经为您提供了要使用classList属性的数组，该属性返回元素的类名

<div id="myDiv" class="first second third">
</div>

console.log(document.getElementById("myDiv").classList[1]);


log（document.getElementById（“myDiv”）.classList[1]）；

将返回“second”。
这是常规方法，但不需要jQuery方法。好了，这在所有浏览器中都有效。对类列表的支持由来已久。您必须使用非常旧的浏览器才能使其不工作。