This tutorial shows how to work with the parent and child relations in jQuery.
- parent refers to the parent element in which is directly included other element, called child.
For example, in this HTML code:

<div id="parent_tag">
 <p id="child_tag">Some text...</p>
 <span>Other child of "parent_tag" element.</span>
</div>
- The DIV ("parent_tag") is the parent element of the paragraph (<p>) and <span>. The <p> and <span> are the children of the "parent_tag" (the DIV).

jQuery parent()

Get the direct parent of each element in the current set of matched elements.
Syntax:
jQuery_object.parent(selector)
- jQuery_object - represents a set of DOM elements (selected items).
- "selector" - is optional and represents a string containing a selector expression to match elements against.

Example, when click on a button will be displayed an alert window with the ID of the parent tag of the images with class="clsim".
<div id="thediv">
 <p id="the_p">
  <img src="imgs/webcourses.gif" alt="Courses: coursesweb.net" class="clsim" width="180" height="60" />
 </p>
 <button id="btn">Click</button>
</div>

<script type="text/javascript"><!--
$(document).ready(function() {
  // when click on #btn
  $('#btn').click(function(){
    // get ID of parentt of ".clsim"
    var idpr = $('.clsim').parent().attr('id');
    alert('ID of the parent of the image is:\n'+ idpr);
  });
});
--></script>

Demo:

Courses: coursesweb.net


Another example, using a selector in the parent() method, to filter the results.
- Adds a background color to the parent of each <a> (only to the parents with a class="clsli").
<ul>
 <li class="clsli"><a href="http://coursesweb.net/javascript/" title="JavaScript Course">JavaScript Course</a></li>
 <li><a href="http://coursesweb.net/html/" title="HTML Course">HTML Course</a></li>
 <li class="clsli"><a href="http://coursesweb.net/jquery/jquery-course" title="jQuery Course">jQuery Course</a></li>
</ul>
<button id="btn2">Click</button>

<script type="text/javascript"><!--
$(document).ready(function() {
  // when click on #btn2
  $('#btn2').click(function(){
    $('a').parent('.clsli').css('background', '#08ed09');
  });
});
--></script>

Demo:

• If you want to refer to the parent of the parent, use this syntax:
jQuery_object.parent().parent()

jQuery children()

Get the direct children of each element in the set of matched elements.
Syntax:
jQuery_object.children(selector)
- jQuery_object - represents a set of DOM elements (selected items).
- "selector" is optional and represents a string containing a selector expression to match elements against (to filter the children).

Example, change the text color of the children of each <li> (only of the children with a class="clsa").
<ul>
 <li><a href="http://coursesweb.net/javascript/" title="JavaScript Course" class="clsa">JavaScript Course</a></li>
 <li><a href="http://coursesweb.net/html/" title="HTML Course">HTML Course</a></li>
 <li><a href="http://coursesweb.net/jquery/jquery-course" title="jQuery Course" class="clsa">jQuery Course</a></li>
</ul>
<button id="btn3">Click</button>

<script type="text/javascript"><!--
$(document).ready(function() {
  // when click on #btn3
  $('#btn3').click(function(){
    $('li').children('.clsa').css('color', '#fe0001');
  });
});
--></script>

Demo:


• jQuery has also selectors that can be used in relation parent-child, like :nth-child(), and parent > child.

:nth-child() Selector

The :nth-child(n) selects all elements that are the nth-child of their parent.
Syntax:
$(selector:nth-child(n))
This pseudo-class is strictly derived from CSS. The index (n) of each child to match, starts with 1.

Example, places a border around the (n) image in DIV with an id="iddv". The index "ni" is incremented by 1 to each click.
<div id="iddv">
 <img src="imgs/circle.gif" alt="Circle" width="29" height="30" />
 <img src="imgs/rhomb.gif" alt="Rhomb" width="37" height="30" />
 <img src="imgs/triangle.gif" alt="Triangle" width="36" height="32" />
</div>
<button id="btn4">Click</button>

<script type="text/javascript"><!--
$(document).ready(function() {
  var ni = 1;
  var nrims = $('#iddv img').length;       // number of images in #iddv

  // when click on #btn4
  $('#btn4').click(function(){
    // adds border to "ni" img in #iddv
    $('#iddv img:nth-child('+ ni+ ')').css('border', '2px dashed blue');
    ni++;        // increment "ni" by 1

    // remove "click" event on #btn4 if "ni" greater then number of images
    if(ni > nrims) $("#btn4").unbind('click');
  });
});
--></script>

Demo (click various times on the button):
Circle Rhomb Triangle

jQuery("parent > child")

The $("parent > child") selector selects all direct child elements specified by "child" of elements specified by "parent".

Example, when click on a button, places a border around all list items that are children of <ul class="clsul">.
<ul class="clsul">
 <li>Item 1</li>
 <li>Item 2, with nested UL
  <ul><li>Nested item 1</li><li>Nested item 2</li></ul>
 </li>
 <li>Item 3</li>
</ul><button id="btn5">Click</button>

<script type="text/javascript"><!--
$(document).ready(function() {
  // when click on #btn5
  $('#btn5').click(function(){
    $('ul.clsul > li').css('border', '1px solid #fe0001');
  });
});
--></script>

Demo:


• Notice the difference between these two selectors: "parent > child" and "parent child" (without '>' ).
The "P > C" selects the direct child elements, but the "P C" selects all child elements, including nested children.
- Here's the same example presented above, but with "P C" (without '>' ). The border will be placed around nested lists too.
<ul class="clsul">
 <li>Item 1</li>
 <li>Item 2, with nested UL
  <ul><li>Nested item 1</li><li>Nested item 2</li></ul>
 </li>
 <li>Item 3</li>
</ul><button id="btn6">Click</button>

<script type="text/javascript"><!--
$(document).ready(function() {
  // when click on #btn6
  $('#btn6').click(function(){
    $('ul.clsul li').css('border', '1px solid #fe0001');
  });
});
--></script>

Demo:

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
What attribute makes a radio button or checkbox input selected?
checked="checked" selected="selected" disabled="disabled"
<input type="checkbox" name="a_name" value="value" checked="checked" />
What CSS value scales the background image to the largest size contained within the element?
repeat-x contain linear-gradient
#id {
  background:url("path_to_image.png");
  background-size:contain;
  background-repeat:no-repeat;
}
What operator is used to determine the rest of the division of two numbers?
% * /
var rest8_7 = 8 % 7;
alert(rest8_7);
Indicate the PHP function that rounds a number up to the next highest integer.
floor() ceil() abs()
$nr = ceil(3.5);
echo $nr;        // 4
jQuery parent, children and nth-child()

Last accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (5354)
  2. Merge Drawing and Object Drawing (230)
  3. Farmscapes (31)
  4. Drag and Drop with jQuery UI (914)
  5. Validate radio and checkbox buttons (615)

Top accessed pages

  1. PHP-MySQL free course, online tutorials PHP MySQL code (5552)
  2. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (5354)
  3. Get Attribute (ID, Class, Name, Title, Src) with jQuery (5147)
  4. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (4917)
  5. PHP Chat Script (4683)