Question

我正在使用这段代码根据元素在Atribite列表中的属性位置来获取元素中每个类的具体名称

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

此代码返回所有类名

 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]);

将返回“秒”。

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

4 个答案: