How to exclude $(this) from a jQuery selector?

Here, we will discuss that how can we exclude $(this) from a selector using jQuery?
Submitted by Pratishtha Saxena, on June 23, 2022

jQuery is a JavaScript library used to simplify HTML DOM tree traversal and manipulation, and event handling. It is free, open-source software. It is user-friendly and easy to use.

Note: Always remember to apply the CDN link while working with jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Suppose we are given a set of links, and the task is that all the other links should disappear as soon as any of the links is selected.

For doing this, we'll create a function in jQuery such that it selects all the other links through a specified class and then hide them.

Now, how to select the other non-clicked links? For this, we'll be using the not() method of jQuery. This method returns the values which are not matched with the specified id or class within the brackets.

Syntax:

$(selector).not(#id or .class);

So, we'll be keeping the class same for all the links and as soon as this function is triggered, it not() method will help to select all the non-clicked links. After this, these links will be hidden using the hide() method of jQuery. As the name suggests, it hides the element which is selected.

Syntax:

$(selector).hide(speed, easing, callback);

Hide takes speed, easing, and callback as its parameters. Speed is the speed at which the content has to disappear, like: fast or slow. Easing is the way that the content disappears, like linear, etc. A callback is a function that can be called when the hide() method is triggered.

Let's see an example of the same.

Code to exclude $(this) from a jQuery selector

HTML Code:

<!DOCTYPE html>

<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   </head>
   <body>
      <center>
         <div class="link">
            <a href="#">Apple</a>
         </div>
         <div class="link">
            <a href="#">Banana</a>
         </div>
         <div class="link">
            <a href="#">Custard Apple</a>
         </div>
      </center>
   </body>
</html>

jQuery Function:

<script>
$(".link a").click(function() {
	$(".link a").not(this).hide("slow","swing");
});
</script>

Output (Before):

Example 1: Exclude $(this) from a jQuery selector

Output (After):

Example 2: Exclude $(this) from a jQuery selector

jQuery Disable Form Submit on Enter

Find all unchecked checkboxes in jQuery

Related Examples

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples