javascript - 如何根据属性在类中的位置获取元素的具体名称

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>