CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mona Coder
Mona Coder

Reputation: 6316

How to get the specific name of an element based on attribute position in the class

I am using this code to get the specific name of each classes inside an element based on their attribute position inside Class attribute list

For example if I want to get the second class inside the div name

This code is returning all class names

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

but I need to get only the second one!

$("#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>

Upvotes: 2

Views: 53

Answers (4)

Taplar
Taplar

Reputation: 24965

The classList is a DOMTokenList, which is an array like construct, on the Element that holds all the classes.

$("#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>

Upvotes: 2

Daniel McIntyre
Daniel McIntyre

Reputation: 74

You want to use the classList property which returns the class name(s) of an element.

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

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

will return "second".

Upvotes: 0

fedesc
fedesc

Reputation: 2610

You could also split the result you get with attr() and address each element by it's index like this: 

$("#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);
});

but it is advisable to use classList as it already provides you with the array

Upvotes: 0

Jack Bashford
Jack Bashford

Reputation: 44115

JavaScript has a built-in property on all elements classList - since you want the second one, use [1]. Use destructuring to get all three:

$("#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>

Upvotes: 3

Related Questions