jQuery - andSelf (), méthode

La description

le andSelf( ) ajoute la sélection précédente à la sélection actuelle.

La méthode est utile lorsque vous avez plusieurs traversées dans votre script, puis que vous ajoutez quelque chose qui correspondait avant la dernière traversée.

Syntaxe

Voici la syntaxe simple pour utiliser cette méthode -

selector.andSelf( )

Paramètres

Voici la description de tous les paramètres utilisés par cette méthode -

  • NA.

Exemple

Voici un exemple simple montrant l'utilisation de cette méthode -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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>

Ici, la bordure serait ajoutée à la sélection précédente qui est une division, puis une deuxième sélection qui est des paragraphes, comme indiqué ci-dessous -

Si vous supprimiez la méthode andSelf (), la bordure serait appliquée aux paragraphes uniquement.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.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>

Cela produira le résultat suivant -

jquery-traversing.htm