jQuery parent, children and nth-child()

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:
  • Item 1
  • Item 2, with nested UL
    • Nested item 1
    • Nested item 2
  • Item 3


• 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:
  • Item 1
  • Item 2, with nested UL
    • Nested item 1
    • Nested item 2
  • Item 3