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:
jQuery parent, children and nth-child()

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is a block element?
<div> <img> <span>
<div>Web Programming and Development</div>
Which CSS code displays the text underlined?
font-style: italic; text-decoration: underline; font-weight: 500;
h2 {
  text-decoration: underline;
}
Click on the JavaScript function that can access other function after a specified time.
insertBefore() setTimeout() querySelector()
function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);
Click on the instruction that returns the number of items of a multidimensional array in PHP.
count($array) count($array, 1) strlen()
$food = array("fruits" => array("banana", "apple"), "veggie" => array("collard", "pea"));
$nr_food = count($food, 1);
echo $nr_food;       // 6

Last accessed pages

  1. Get Attribute (ID, Class, Name, Title, Src) with jQuery (26562)
  2. Using fadeIn and fadeOut (859)
  3. Check and Validate input field when loses focus, with PHP via Ajax (2341)
  4. Highlight selected, clicked word in page (1142)
  5. Line and Text (757)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (35488)
  2. PHP-MySQL free course, online tutorials PHP MySQL code (28404)
  3. Read Excel file data in PHP - PhpExcelReader (27256)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (26562)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (23300)