Web | This Site

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

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

# jQuery - CSS Multiple Elements E, F, G Selector

# Description:

This Multiple Elements selector selects the combined results of all the specified selectors E, F or G.

You can specify any number of selectors to combine into a single result. Here order of the DOM elements in the jQuery object aren't necessarily identical.

# Syntax:

Here is the simple syntax to use this selector:

     $('E, F, G,....')

## Parameters:

Here is the description of all the parameters used by this selector:

- E: Any valid selector

- F: Any valid selector

- G: Any valid selector

- ....

# Returns:

Like any other jQuery selector, this selector also returns an array filled with the found elements.

# Example:

- $('div, p'): selects all the elements matched by div or p.

- $('p strong, .myclass'): selects all elements matched by strong that are descendants of an element matched by p as well as all elements that have a class of myclass.

- $('p strong, #myid'): selects a single elements matched by strong that is descendant of an element matched by p as well as element whose id is myid.

Following example would select elements with class ID big and element with ID divid3:

    <html>
    <head>
    <title>The Selecter Example</title>
    <script type="text/javascript" src="/jquery/jquery-1.3.2.min.js">
    </script>

    <script type="text/javascript" language="javascript">

      $(document).ready(function() {
          var elements = $(".big, #divid3");
          for( i=0; i<elements.length; i++ ){
             alert("Found element: " + elements[i].innerHTML);
          }
       });

    </script>
    </head>
    <body>

    <div class="big" id="divid1">
      <p class="para1" id="pid1">This is first paragraph.</p>
      <p class="para2" id="pid2">This is second paragraph.</p>
      <p class="para3" id="pid3">This is third paragraph.</p>
    </div>
    <br />

    <div class="big" id="divid2">
      <p>This is second division of the DOM.</p>
      <p>This is second para inside second division.</p>
    </div>
    <br />

    <div class="medium" id="divid3">
      <p>This is a para inside third division</p>
    </div>

    </body>
    </html>

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

Advertisement

Online Image Processing

Indian Baby Names