Web | This Site

jQuery Tutorial
jQuery UI
jQuery References
jQuery Resources
Selected Reading
© 2011 TutorialsPoint.COM

| Home |  | References |  | Discussion Forums |  | About TP

# jQuery - andSelf( ) Method

# Description:

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

Thie method is useful when you have multiple trasversals 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:

    <html>
    <head>
    <title>the title</title>
       <script type="text/javascript"
       src="/jquery/jquery-1.3.2.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>

This would generate following result. Here border would be added to previous selection which is a division and then second selection which is paragraphs. If you would remove andSelf() method then border would be applied to paragraphs only.

    <html>
    <head>
    <title>the title</title>
       <script type="text/javascript"
       src="/jquery/jquery-1.3.2.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>

To understand it in better way you can Try it yourself.

Advertisement

Online Image Processing

Indian Baby Names