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

Question

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

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

此代码返回所有类名

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

但我只需要第二个！

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

 #banner-message { background: #ccc; border-radius: 4px; padding: 20px; font-size: 25px; text-align: center; transition: all 0.2s; margin: 0 auto; width: 300px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="cl1 cl2 cl3" id="banner-message"></div> 

Answer 1

JavaScript在所有元素classList上都具有内置属性-由于您需要第二个元素，因此请使用[1] 。 使用解构来获取全部三个：

 $("#banner-message").on('click', function(){ var [FirstclassName, SecondclassName, ThirdclassName] = this.classList; console.log(FirstclassName); console.log(SecondclassName); console.log(ThirdclassName); var second = this.classList[1]; console.log(second); }); 

 #banner-message { background: #ccc; border-radius: 4px; padding: 20px; font-size: 25px; text-align: center; transition: all 0.2s; margin: 0 auto; width: 300px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="cl1 cl2 cl3" id="banner-message"></div> 

Answer 2

classList是DOMTokenList，它是保存所有类的Element上的类似于构造的数组。

 $("#banner-message").on('click', function(){ console.log(this.classList[1]); }); 

 #banner-message { background: #ccc; border-radius: 4px; padding: 20px; font-size: 25px; text-align: center; transition: all 0.2s; margin: 0 auto; width: 300px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="cl1 cl2 cl3" id="banner-message"></div> 

Answer 3

您还可以使用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因为它已经为您提供了数组

Answer 4

您想使用classList属性，该属性返回元素的类名称。

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

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

将返回“秒”。