-1

I have an li tag that looks like:

<li class="active_fix generator" data-selected="1"></li>

Within my onClick event I have a console.log on $(this) and I get back

[li.active_fix generator] - among a few things in my console window.

How can I grab the class. So for example save the classname active_fix as a var but not the second class name generator.

$('active_fix').on('click', function() {
  console.log($(this));
})

Thanks.

pourmesomecode
  • 4,108
  • 10
  • 46
  • 87
  • 1
    Could you describe why you need this? Normally questions about dissecting the `class` attribute are a means to an end that can be better solved another way. – Rory McCrossan Jan 14 '16 at 10:37
  • onLoad I randomly assign classes to elements, then `onClick` I override the class and add another. I needed a way to be able to remember the class that it had to toggle it – pourmesomecode Jan 14 '16 at 10:42
  • Add the class and also store it in a data attribute. Then you can toggle it on and off based on the value in the data. If you can show the code where you assign the classes I can give you and example of how to do this. – Rory McCrossan Jan 14 '16 at 10:43
  • Ahh that might be a better method thanks @RoryMcCrossan I read this http://stackoverflow.com/questions/17184918/best-practice-class-or-data-attribute-as-identifier and opted to use classes instead of `data-attributes` as the class is only toggling different styles – pourmesomecode Jan 14 '16 at 10:48

6 Answers6

3

You can split the class name,

$(this).attr("class").split(" ")[0]

We are getting the class name using attr and splitting the string by a space, then we are getting the first key in the array.

Reading Material

attr

split

Script47
  • 14,230
  • 4
  • 45
  • 66
1

Try to use .attr("attributeName") to get its attribute(any),

$('.active_fix').on('click', function() {
  console.log($(this).attr("class").split(" ")[0]); //Jquery
  console.log(this.className.split(" ")[0]); //Pure Javascript
});

this.className will return a string "active_fix generator". Basically multiple classes to an element can be applied by adding a space as a delimiter. So you can split that returned string with space to get array of class names. And from that array [0] will get you the first class.

Rajaprabhu Aravindasamy
  • 66,513
  • 17
  • 101
  • 130
1

You can use classList to retrieve a list of the elemnent classes:

$('.active_fix').on('click', function() {
  alert(this.classList[0]);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="active_fix generator" data-selected="1">...</li>
Magicprog.fr
  • 4,072
  • 4
  • 26
  • 35
0

$('.active_fix').on('click', function() {
 alert($(this).attr("class").split(" ")[0]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="active_fix generator" data-selected="1"></li>
Tushar Gupta
  • 15,504
  • 1
  • 29
  • 47
-1

DevJunior Try This , It will help you

$('.active_fix').on('click', function() {
           console.log($('.active_fix').attr('class').split(' ')[0]);
     });
Parveen Kumar
  • 344
  • 2
  • 11
  • This was already suggested to the OP a decade ago. Also, inside the callBack function using `$(this)` should be the correct choice. If you use class selector, then it will select all the elements which are having that class and invocation of `.attr()` will be ran over the first element from the collected set. – Rajaprabhu Aravindasamy Jan 14 '16 at 10:52
  • @RajaprabhuAravindasamy, Thanks for suggestion – Parveen Kumar Jan 14 '16 at 10:59
  • @RajaprabhuAravindasamy Your comment about a decade makes no sense. This question was posted today, and the OP has only had an account here for a year. – Dan Lowe Jan 14 '16 at 15:12
-1
$('.active_fix').on('click', function() {
 alert(this.classList[0]);
})
Jobelle
  • 2,717
  • 1
  • 15
  • 26