What is jquery Hasclass? – jQuery Check if Element has Class

In this jquery hasclass demo with example, I will learn all about jquery .hasClass() function selector.hasClass( className ) – is used to check if an element has a each class or not. The has Class method will return true if the your used define each class name is assigned to an HTML element more data it returns true or false value.

All Question & Answers

Read Also:  Ajax Autocomplete Live Search Suggestion using PHP MySQL

jquery check if class exists on page using hasclass

  • The simple jQuery .hasClass() checks whether the selected HTML tag, class id or any element has the each class or not.
  • It returns a Boolean value Like as a (true or false).

The jQuery has Class() is a easy to use a built-in method used to check whether the selected all the HTML elements, with a check a specified class name, exist or not.

Using .hasClass()

jQuery .hasClass() determines whether HTML elements have a class you each. In the simple example below, the returns Boolean data value is returned like true or false after clicking a this button:

Jquery .hasClass() Syntax

$(selector).hasClass(classname); 

In below example we have two classes (‘seokhazana’ , ‘katmoviehd’) associated with div tag.

<div id="mp4moviez" class="seokhazana katmoviehd"></div>

It would return true value

$( "#mp4moviez" ).hasClass( "seokhazana" ); 

It would return true value

Read Also:  onclick show hide div jquery demo - jQuery Effects

$( "#mp4moviez" ).hasClass( "katmoviehd" ); 

It would return false value. As no matching class name found.

$( "#mp4moviez" ).hasClass( "4cgandhi" ); 

Jquery .is() Function Source Code

In this Jquery .hasClass() Method Example We have multiple of li HTML elements which is associated with simple same class names (4cgandhi, seokhazana and katmoviehd) and on click of each button, We going to fade out some matching class name li HTML element.

index.html

<!DOCTYPE html>
<html>
   <head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script>
         $(document).ready(function() {   
          $(".btn").click(function(){ 
           var className = $(this).attr("id");
           $("ul li").each(function() {     
            if ($(this).hasClass(className)) {
             $(this).fadeTo('slow', 0.5).fadeTo('slow', 1.0);      
            }
           });    
          }); 
         });
      </script>   
      <style>
         ul{
         font-family: monospace;
         font-size: 15px;
         font-family: monospace; 
         font-style: normal;
         font-size-adjust: none;
         width:200px;   
         padding:0px; 
         }
         ul li{
         background-color:#4585F3;
         width:100px;
         margin:5px;
         padding:5px;
         list-style-type:none;
         width:200px;
         }
      </style>
   </head>
   <body>
      <h1>Jquery has Class() function Example</h1>
      <ul>
         <li class="4cgandhi">4cgandhi</li>
         <li class="seokhazana">seokhazana</li>
         <li class="seokhazana 4cgandhi">seokhazana 4cgandhi</li>
         <li class="katmoviehd">katmoviehd</li>
      </ul>
      <input type="button" class="btn" value="4cgandhi Class" id="4cgandhi"> <input type="button" class="btn" value="seokhazana Class" id="seokhazana"> <input type="button" class="btn" value="katmoviehd Class" id="katmoviehd"> <input type="button" class="btn" value="No Matching Class" id="noclass"> 
   </body>
</html>

Jquery .hasClass() Method Example

index.html

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>

<div class="pakainfoweb"></div>

<button>Click me</button>
<script>
$(document).ready(() => {
	$("button").click(() => {
	    alert($("div").hasClass("pakainfoweb"));
	    $("div").removeClass("pakainfoweb");
	});
});
</script>
</body>
</html>

Note: here you Keep in mind it might have multiple classes. the .hasClass() jQuery will data return true if HTML an element has the each class.

Read Also:  Laravel 5.6 Like Dislike rating system with jQuery, Ajax and PHP

jQuery full source code example to check whether a HTML web page element has a each css class attached.

I hope you get an idea about jquery has-class.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  vue-scrollto smooth scroll vuejs example
  2. Read Also:  Date Range Search Jquery DatePicker using Ajax PHP with MySQL
  3. Read Also:  Remove undefined value from jquery array
  4. Read Also:  PHP AJAX Live Search Box Autocomplete Using MySQL Database
  5. Read Also:  PHP Laravel 6 Flash Message Notification
  6. Read Also:  How to get the class name using Jquery Example with demo?
  7. Read Also:  Simple Jquery ajax request example with demo
  8. Read Also:  Remove particular value from jquery Array
  9. Read Also:  Jquery Angular conflict Solution Example
  10. Read Also:  jQuery Text Avatars Using CSS Like Gmail
CLOSEX