jQuery hasClass Function & Multiple Classes Example

jQuery hasClass:- We are defining some point of jquery has class with example. So In this article, we have explained in detail what is the jQuery hasClass() and below are some points which we will see from the example.

jQuery hasClass

Now we use these functions because it shows us whether any event of the Html tag. You can see in the below example.

Syntax

jQuery(Selector).hasClass('class_name');

 

<!DOCTYPE html>
<html>
<head>
  <title>Jquery hasClass Example</title>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">

  jQuery(document).ready(function(){
    
    jQuery('button').click(function(){
    
      var hcls =jQuery('p').hasClass('testingclass');
        alert(hcls);
    });
  });
</script>
</head>
<body>
<h1>Here is a your code </h1>
<p class="testingclass">has class event show</p>
<button>click here</button>
</body>
</html>

output:- 

 

Here are some of them

  • What is jQuery hasClass with Example?
  • jquery hasClass multiple classes and Id.
  • jquery has Class function.
  • check if class exists jquery.
  • check if class does not exists jQuery.
  • if has class jQuery condition.
  • jQuery hasClass addClass removeClass.
  • jquery has Class not working.

What is jQuery hasClass with Example?

So Now We are explaining about jQuery has class basically hasClass has a jquery function When we use this when we find any Html class or id and tag in the syntax. It helps us specific class or id.

In other words, if we can add any line of code. we can get the value of any input field with jquery has class. we can use it as we like.

For example, It shows us that if we cannot find any class or paragraph. Then we can do the children’s function as well, we have shown in the example below.

Here is code with an example below:-

<!DOCTYPE html>
<html>
<head>
  <title>Jquery hasClass children with Example</title>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">

  jQuery(document).ready(function(){
    
    jQuery('button').click(function(){
    
      var hcls =jQuery('testClass').children().hasClass('p');
        alert(hcls);
    });
  });
</script>
</head>
<body>
<h1>jas class example with chindren function</h1>
<div class="testClass">
  <p>my name is web learn smart.</p>
</div>
<button>Submit</button>
</body>
</html>

jQuery hasClass

jQuery hasClass Multiple Classes and Id

jQuery has Class, multiple classes. This means that we can use to check the syntax which has more than one class and can also check its children and parent class. However, Can do any event jQuery hasClass().

jQuery hasClass() multiple id. For instance, We also have any event performance using the id in it. You also see in details How to Get Radio Button Value jQuery

<!DOCTYPE html>
<html>
<head>
  <title>Jquery hasClass Multiple class</title>
  
<style type="text/css">
  body {
    background: blueviolet;
    color: aliceblue;
    text-align: center;
}
</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">

  jQuery(document).ready(function(){
    
    jQuery('button').click(function(){
    
      var hcls =jQuery('class1').hasClass('class2');
        alert(hcls);
    });
  });
</script>
</head>
<body>
<h1>Example with Multiple class and id</h1>
<div class="class1 class2">
  <p>this is class for jquery hasclass</p>
</div>
<div id="test">
  <p>this is id for jquery hasclass</p>
</div>
<button>Submit</button>
</body>
</html>

 

jQuery has Class function

has class function. For example, this is the function of the jQuery that we use. If any value is true, then the performance in them also we can do event performance with jquery has Class function.

<script type="text/javascript">

  jQuery(document).ready(function(){
    
    jQuery('button').click(function(){
    
      alert(jQuery('class1').hasClass('class2'));
        
    });
  });
</script>

 

Check if Class exists jquery

So whether that line of syntax has a class exist or not then give us true and false values of your conditions.

<script type="text/javascript">

  jQuery(document).ready(function(){
    
    jQuery('test_class').click(function(){
    
      alert(jQuery('p').hasClass('exist_class'));
        
    });
  });
</script>

 

Check if class does not exists jQuery

Class does not exist jQuery:- For example, similarly then that line of syntax and conditions check with jQuery hasClass() value false then class does not exist in these conditions.

<script type="text/javascript">

  jQuery(document).ready(function(){
    
    jQuery('exist_class').click(function(){
    
      alert(jQuery('p').hasClass('not_exist_class'));
        
    });
  });
</script>

If has Class jQuery Condition

If has class jQuery condition:- Most importantly, We can do apply conditions for has Class function. For example, If it has a class this exists and not exist.

In addition, Below we will explain in detail how we have conditions and when we use the conditions if a class is found in our select element. Then it will give value in the pattern or else it will not give the return. So Now you can see Link JavaScript to Html

<!DOCTYPE html>
<html>
<head>
  <title>Jquery hasClass conditions</title>
  
<style type="text/css">
  body {
    background: blueviolet;
    color: aliceblue;
    text-align: center;
}
</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">

  jQuery(document).ready(function(){
    
    jQuery('button').click(function(){
    
      var hcls =jQuery('class1').hasClass('class2');
        
      if(hcls == true){

        alert('value exist');
      }
      else{

        alert('value not exist');
      }

    });
  });
</script>
</head>
<body>
<h1>Example with conditions</h1>
<div class="class1 class2">
  <p>Class exits and not with conditions </p>
</div>
<button>Submit</button>
</body>
</html>

jQuery hasClass

jQuery hasClass addClass removeClass

addClass removeClass:- How can we add and remove any class in the element using has Class function. In the below example you can see.

<!DOCTYPE html>
<html>
<head>
  <title>Jquery hasClass conditions</title>
  
<style type="text/css">
  body {
    background: blueviolet;
    color: aliceblue;
    text-align: center;
}
</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">

  jQuery(document).ready(function(){
    
    jQuery('button').click(function(){
    
      var hcls =jQuery('p').hasClass('class2').removeClass('class2');
        
      if(hcls == true){

        alert('Yuor class is remove ');
      }
      else{

        alert('your class is nnot remove');
      }

    });
  });
</script>
</head>
<body>
<h1>Add remove Class</h1>
<div class="class1">
  <p class="class2">Add class and remove class here </p>
</div>
<button>Submit</button>
</body>
</html>

For Add Class in this code

jQuery('button').click(function(){
    
      var hcls =jQuery('p').hasClass('class2').addClass('class2');
        
      if(hcls == true){

        alert('Yuor class is remove ');
      }
      else{

        alert('your class is nnot remove');
      }

    });

 

jquery has Class not working

For example, not working. There can issue something like the element missing issue syntax missing.

So you can resolve that issue firstly check which are are you facing at this moment and check your code with conditions that jQuery has Class uses it properly.

Then you will solve your issue and you see our code and use it.

Conclusion

So If you have any queries about this article and this topic also another relative topic you can ask any time we will solve your problem.

But there are more example of jQuery  also give code with examples clear all topic step by step if you want more details about WordPress themes vs templates

 

 

 

Updated: October 13, 2019 — 8:56 pm

Leave a Reply

Your email address will not be published. Required fields are marked *

Web Learn Smart © 2019 Frontier Theme