jQuery is() Method

Quiz

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.

jquery_ref_traversing.htm

Print Page