How to get a class name based on div hover in jquery

Question

I'm looking for a way to fetch the class name based on hovering on a div. Both div has same id but slightly different class name. take a look at the below example:

<div id="1-someid" class="1-example-class border cz">
...more element goes here....
</div>

and

<div id="2-someid" class="2-example-class border cz">
...more element goes here....
</div>

Update: I've made the id name unique based on expert's opinion posted below. :) Thanks for all the helps.

Now what I want is, when user hover on the div with 1-example-class it will return me the class name 1-example-class. and when people will hover on the div with 2-example-class it will return me 2-example-class name.

So that I can use parseInt() on that name to fetch the number, 1, 2, 3 and so on.

Also please note that writing a static script for just 1-example-class or 2-example-class will not help as there are many more divs like this with 3, 4, 5 and so on attached to it.

Can anyone help? I have tried the following but it didn't helped.

$('#someid').hover(function() {
        var class_names = $(this).attr('class');

        var class_name = class_names.split( ' ' ); 

        var c = parseInt( class_name[0] );

        console.log( c );
});

If anyone can help it will be really helpful.

Answer 1

Here is a way to do it based on your current configuration:

$('div').hover(function() {
        // grab class attribute, split on space character (like you're doing already)
        var class_names = $(this).attr('class').split( ' ' );

        // loop through each class
        $.each( class_names, function( k,v ){
            // see if this 1 class matches your example
            if ( v.indexOf("example-class") > 0 ){
                // if it does, remove text part of class name
                var this_num = v.replace( '-example-class', '' );
                // output numeric value only to console
                console.log( parseInt( this_num ) );
            }
        });

});

This method does not expect the same class configuration (meaning the classes in your class attribute can be in any order, so long as it does contain the example string). In your question, the code expects first class listed to be the example string class.

See this example: https://jsfiddle.net/31505tw1/

In the example, I have replaced your duplicate IDs into classes. As others have pointed out, HTML spec requires each ID to be unique.

Answer 2

Attribute selector and Regex is the way to go:

$("[class*=example-class]").hover(function() {
    var c = this.className.match(/(\d+)-example-class/)[1];
    console.log(c);
});

• $("[class*=example-class]") matches all elements that their class attribute includes 'example-class' string.

• this.className.match(/(\d+)-example-class/)[1] gives the related number.

Answer 3

There are several ways to do this- but other users are correct that your issue is in using the same ID multiple times, that's the only reason the code you already have doesn't work. If you use one of the other shared classes as your selector your original script will work:

$('.border').hover(function() {
    var class_names = $(this).attr('class');

    var class_name = class_names.split( ' ' ); 

    var c = parseInt( class_name[0] );

    console.log( c );
});

Answer 4

Firstly, you should use unique ID's on your div's: https://stackoverflow.com/a/9454716/984323

Not only for the HTML to be valid, but your jQuery script wouldn't be able to differentiate between the two. Then you can target each div and the rest of your code seems to work.

<div id="someid" class="1-example-class border cz">
...more element goes here....
</div>

<div id="someid2" class="2-example-class border cz">
...more element goes here....
</div>

https://jsfiddle.net/05r8f013/1

Answer 5

Maybe you could for example:

$('div').hover(function(){
if ( $(this).attr('class') == 'some class' ) {
//Do something 
} else {
//Do something else...
}

Answer 6

ID's must be unique all over html. Since you are using classname to get the data, you can add name field to the div:

<div name="someid" class="1-example-class border cz">
...more element goes here....
</div>

<div name="someid" class="2-example-class border cz">
...more element goes here....
</div>

 $('[name="someid"]').hover(function() {
    var class_names = $(this).attr('class');
    var class_name = class_names.split( ' ' ); 
    var c = parseInt( class_name[0] );
    console.log( c );
 });

Answer 7

You could do a Regex on the hovered items that match on the pattern of the class name:

<div name="someid" class="1-example-class border cz">
...more element goes here....
</div>



<script>

$('#someid').hover(function() {
   var className = this.className.match(/(\d)-example-class/);

   if(className){
      console.log(className[0]) // 1-example-classname
      console.log(className[1]) // 1
   }
});