Jquery Child Filter Method()

JQuery Child Filter

• Child selectors are assist to find the child element which is nested with a parent.
• It is one of the pseudo-selectors to find out an element through a parent element.

:first-child

• Jquery: the first-child selector assist to select the first child of a selected parent.
• This child selector is based on parent and child relationships.

$(document).ready(function () {
    $('button').click(function () {
        alert($('div p:first-child').text());
    });
});  

• The above example explains that it selects the first p child to the div parent.

:first-of-child

• Jquery: the first-of-child selector gets an entire first child to the selected parent.

$(document).ready(function () {
    $('button').click(function () {
        alert($('div p:first-of-child').text());
    });
}); 

• It searches all div elements in the Html document and gets the entire child element of the div.

:last-child

• Jquery:last-child selector get the last element to a selected parent element.
• So in this selector get the last element only.

$(document).ready(function () {
    $('button').click(function () {
        alert($('div p:last-child').text());
   });
});  

• The last p element of the parent div will be displayed.

:last-of-child

• Jquery:last-of-child selector select an entire last element of the selected parent.

$(document).ready(function () {
    $('button').click(function () {
        alert($('div p:last-of-child').text());
    });
}); 

• It selects the entire last element.

:nth-child()

• Jquery :nth-child() selector elect a specified indication of the n element.
• The n contains only the whole number not decimal values.

$(document).ready(function () {
    $('button').click(function () {
     alert($('div p:nth-child(2)').text());
    });
 });   

• In this filter get the aspiration of the developer.
• Because we can collect the element directly based on element position.

:nth-of-child

• Jquery:nth-of-child selector gets an entire childhood of the nth element to a selected parent.

$(document).ready(function () {
    $('button').click(function () {
     alert($('div p:nth-of-child(2)').text());

    });
});    

• This above example derives the entire second p element of the parent div.

:nth-last-child()

• jquery starts to explore at the end of the last element.

 $(document).ready(function () {
    $('button').click(function () {
     alert($('div p:nth-last-child(2)').text());
     });
 });

• The Example explains then the counting starts at last.

:nth-last-of-type()

• Jquery :nth-last-of-type() selector get an entire last specified nth element.

$(document).ready(function () {
    $('button').click(function () {
     alert($('div p:nth-of-last-child(3)').text());
     });
});  

• The perfect nth element has selected and the counting starts at the end of the parent.

Read More:-

How to filter contents with jQuery

jQuery | Basic filter() with Examples

Jquery Hierarchy Selectors|Child Selector (“parent > child”) 

[jQuery] attribute Selector 

Jquery | Basic Selectors

[jQuery] :Even Selector

Jquery Overview