Jquery Course

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 HTML5 tag can be used to embed an external application (SWF, PDF) in web page?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Which CSS pseudo-element adds a special style to the first line of a text?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Click on the window object property which gets or sets the URL of current page.
window.location window.self window.status
var url = window.location;
alert(url);
Indicate the PHP function used to get the contents of a file or page and store it into a string.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://coursesweb.net/");
echo $homepage;
jQuery parent, children and nth-child()

Last accessed pages

  1. Output or Force Download MP3 with PHP (5825)
  2. Snap to Objects and Snap Align (2880)
  3. Highlight Images on click (6765)
  4. innerHTML and outerHTML to Get and Replace HTML content (30639)
  5. PHP Unzipper - Extract Zip, Rar Archives (32334)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (352)
  2. CSS cursor property - Custom Cursors (41)
  3. The Mastery of Love (39)
  4. PHP-MySQL free course, online tutorials PHP MySQL code (34)
  5. Read Excel file data in PHP - PhpExcelReader (31)