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.

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.

• javascript
• jquery
• html
• css

• You should not have two elements with the same ID... – Patrick Moore Commented Aug 24, 2016 at 18:55
• @PatrickMoore why? I thought it will make things easier to fetch via js also there are css for that id – iSaumya Commented Aug 24, 2016 at 18:55
• I'd remend a different approach, because as someone previously mentioned, having the same id for different elements will cause problems. – Henry Ollarves Commented Aug 24, 2016 at 18:57
• @iSaumya Do you know what ids are? They are unique identification strings and you cannot have two elements with the same id. The HTML5 specification prohibits repeated ids. – Derek 朕會功夫 Commented Aug 24, 2016 at 18:58
• if I make them 1-someid, 2-someid still how do I get the values based on hover? – iSaumya Commented Aug 24, 2016 at 18:59

7 Answers 7

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.

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/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.

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

Firstly, you should use unique ID's on your div's: https://stackoverflow./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/05r8f013/1

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

Maybe you could for example:

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

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