jQuery nth-child selector

The jQuery nth-child selector is used to get the nth child of a parent element.

nth-child(1)
In this post we shall see on how to use the jQuery nth-child selector to get the nth child of a parent element

The following script gets the 1^st and 2^nd child elements of the parent tr element trName.

    alert('Hierarchy Parent:' + $("#trName").attr('id'));

    alert('Hierarchy 1st Child:' + $("#trName td:nth-child(1)").attr('id'));

    alert('Hierarchy 2st Child:' + $("#trName td:nth-child(2)").attr('id'));

The following script gets the 1^st and 2^nd child elements of the parent tr element trName on click of the btnHierarchySelector button.

$('#btnHierarchySelector).click(function(event) {
    event.preventDefault();               
    //
    // Hierarchy - nth Child

    alert('Hierarchy Parent:' + $("#trName").attr('id'));

    alert('Hierarchy 1st Child:' + $("#trName td:nth-child(1)").attr('id'));

    alert('Hierarchy 2st Child:' + $("#trName td:nth-child(2)").attr('id'));
});

Related Post
jQuery hierarchy selector
jQuery first selector
jQuery last selector
jQuery even selector
jQuery odd selector
jQuery only-child selector
jQuery parent selector
jQuery nth-child selector
jQuery index :gt selector
jQuery empty selector
jQuery first selector for Textbox
jQuery last selector for Textbox
jQuery first selector for Dropdown
jQuery last selector for Dropdown
jQuery hierarchy selector Example