jQuery Tutorial

jQuery Examples

jQuery Practice

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.


$(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.


$(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">
      <meta charset="UTF-8">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
         <div class="link">
            <a href="#">Apple</a>
         <div class="link">
            <a href="#">Banana</a>
         <div class="link">
            <a href="#">Custard Apple</a>

jQuery Function:

$(".link a").click(function() {
	$(".link a").not(this).hide("slow","swing");

Output (Before):

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

Output (After):

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

Comments and Discussions!

Load comments ↻

Copyright © 2024 www.includehelp.com. All rights reserved.