- jQuery Tutorial
- jQuery - Home
- jQuery - Overview
- jQuery - Basics
- jQuery - Syntax
- jQuery - Selectors
- jQuery - Events
- jQuery - Attributes
- jQuery - AJAX
- jQuery DOM Manipulation
- jQuery - DOM
- jQuery - Add Elements
- jQuery - Remove Elements
- jQuery - Replace Elements
- jQuery CSS Manipulation
- jQuery - CSS Classes
- jQuery - Dimensions
- jQuery - CSS Properties
- jQuery Traversing
- jQuery - Traversing
- jQuery - Traversing Ancestors
- jQuery - Traversing Descendants
- jQuery References
- jQuery - Selectors
- jQuery - Events
- jQuery - Effects
- jQuery - HTML/CSS
- jQuery - Traversing
- jQuery - Miscellaneous
- jQuery - Properties
- jQuery - Utilities
- jQuery Plugins
- jQuery - Plugins
- jQuery - PagePiling.js
- jQuery - Flickerplate.js
- jQuery - Multiscroll.js
- jQuery - Slidebar.js
- jQuery - Rowgrid.js
- jQuery - Alertify.js
- jQuery - Progressbar.js
- jQuery - Slideshow.js
- jQuery - Drawsvg.js
- jQuery - Tagsort.js
- jQuery - LogosDistort.js
- jQuery - Filer.js
- jQuery - Whatsnearby.js
- jQuery - Checkout.js
- jQuery - Blockrain.js
- jQuery - Producttour.js
- jQuery - Megadropdown.js
- jQuery - Weather.js
- jQuery Useful Resources
- jQuery - Questions and Answers
- jQuery - Quick Guide
- jQuery - Useful Resources
- jQuery - Discussion
jQuery is() Method
The is() method in jQuery is used to find out whether the selected elements match a specified selector, element, or jQuery object.
This method returns a Boolean value: "true" if at least one of the selected elements matches the specified criteria; "false" if none of the selected elements matches the specified criteria.
Syntax
Following is the syntax of the is() method in jQuery −
$(selector).is(selectorElement,function(index,element))
Parameters
This method accepts the following parameters −
- selectorElement: A selector, element, or jQuery object used to match against the selected elements.
- function(index, element): It specifies a function to run for the group of selected elements.
Example 1
The following example uses the is() method to check if a paragraph element is visible and changes its background color accordingly −
<html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function(){ $('button').click(function(){ if ($('p').is(':visible')) { $('p').css('background-color', 'green'); } else { alert("Paragraph is hidden"); } }); }); </script> </head> <body> <!--Paragraph is hidden--> <p style="display: none;">This is a hidden paragraph.</p> <button>Check Visibility</button> </body> </html>
When we click the button, it gives an alert saying that "Paragraph is hidden" because the <p> is defined as "display:none".
Example 2
In this example, we are checking if the specified element ("a") is an Anchor Tag −
<html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function(){ $('a').click(function(){ if ($(this).is('a')) { alert('Clicked element is an anchor tag.'); } else { alert('Clicked element is not an anchor tag.'); } }); }); </script> </head> <body> <a href="#">Click me to verify</a> </body> </html>
When we click the button, it gives an alert saying that "Clicked element is an anchor tag" because the element we are checking is an anchor tag.
Example 3
In this example below, we are using the parent() and is() methods to find out if "ul" is the parent of "li" element −
<html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function(){ $('li').click(function(){ if ($(this).parent().is('ul')) { alert('Parent of li is ul.'); } else { alert('Parent of li is NOT ul.'); } }); }); </script> </head> <body> <div> <ul> <li>Click me to verify if my parent is ul element.</li> </ul> </div> </body> </html>
After clicking on the button, it gives an alert saying "Parent of li is ul" because the element "li" is a descendant of "ul" element.