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="https://coursesweb.net/javascript/" title="JavaScript Course">JavaScript Course</a></li>
 <li><a href="https://coursesweb.net/html/" title="HTML Course">HTML Course</a></li>
 <li class="clsli"><a href="https://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="https://coursesweb.net/javascript/" title="JavaScript Course" class="clsa">JavaScript Course</a></li>
 <li><a href="https://coursesweb.net/html/" title="HTML Course">HTML Course</a></li>
 <li><a href="https://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
Which tag is used in <table> to create table header cell?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Which CSS property sets the distance between lines?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Which function opens a new browser window.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicate the PHP function that returns an array with names of the files and folders inside a directory.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
jQuery parent, children and nth-child()

Last accessed pages

  1. Read Excel file data in PHP - PhpExcelReader (56138)
  2. SHA256 Encrypt hash in JavaScript (5686)
  3. AJAX with POST and PHP (11881)
  4. Add, Change, and Remove Attributes with jQuery (35900)
  5. CSS Rhombus Shape (3817)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (446)
  2. Register and show online users and visitors (399)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (386)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (302)
  5. Insert, Select and Update NULL value in MySQL (296)