Next »
1903/1956
« Previous

Descendant $('E F')

Description and Syntax

$('E F') select all elements matched by F that are descendants of an element matched by E. $("ancestor descendant") returns a wrapper object with the descendants of a specified ancestor.

Descendants of an element are that element's children, grandchildren, great-grandchildren, and so on.

For the following html tags, 


<div id="container">
 <div id="inner">
     <p>/*w  ww  .ja v a 2  s. co m*/
         <span><img src="example.jpg" alt="" /></span>
     </p>
 </div>
</div>

the <img> element is a descendant of the <span>, <p>, <div id="inner">, and <div id="container"> elements.

Examples

  • $("form input") a wrapper with all of the inputs that are children of a form.
  • $('#container p') all paragraph elements that are descendants of an element that has an ID of container.
  • $('a img') all <img> elements that are descendants of an <a> element.

The following code selects input element inside form.


<html>
  <head>
    <script type="text/javascript" src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){<!--  ww  w . j  a  v a 2s.  co m-->
        $("form input").css("border", "2px solid red");
      });
    </script>

  </head>
  <body>
      <form>
        <label>Child:</label>
        <input name="name" />
        <fieldset>
          <label>Grandchild:</label>
          <input name="newsletter" />
        </fieldset>
      </form>
  </body>
</html>

Click to view the demo

The code above generates the following result.

Descendant $(
Next »
« Previous