jQuery - andSelf( ) Method

Description

The andSelf( ) method adds the previous selection to the current selection.

The method is useful when you have multiple traversals in your script and then adding something that was matched before the last traversal.

Syntax

Here is the simple syntax to use this method −

selector.andSelf( )

Parameters

Here is the description of all the parameters used by this method −

NA.

Example

Following is a simple example a simple showing the usage of this method −

Live Demo

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>
		
      <script>
         $(document).ready(function(){
            $("div").find("p").andSelf().addClass("border");
         });
      </script>
		
      <style>
         p, div { margin:5px; padding:5px; }
         .border { border: 2px solid red; }
         .background { background:yellow; }
      </style>	
   </head>
	
   <body>
      <div>
         <p>First Paragraph</p>
         <p>Second Paragraph</p>
      </div>
   </body>
</html>

Here border would be added to previous selection which is a division and then second selection which is paragraphs, as shown below −

If you would remove andSelf() method then border would be applied to paragraphs only.

Live Demo

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js">
      </script>
		
      <script>
         $(document).ready(function(){
            $("div").find("p").andSelf().addClass("border");
         });
      </script>
		
      <style>
         p, div { margin:5px; padding:5px; }
         .border { border: 2px solid red; }
         .background { background:yellow; }
      </style>
   </head>
	
   <body>
      <div class = "border">
         <p class = "border">First Paragraph</p>
         <p class = "border">Second Paragraph</p>
      </div>
   </body>
</html>

This will produce following result −

jquery-traversing.htm