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:
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):
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