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