How to filter children of any elements using jQuery?

Overview

JQuery is a great JavaScript library which contains many pre−built methods which helps us to perform a certain function without writing a number of lines of code. An element in jQuery can be considered as any HTML element which is a parent of another element. So the elements inside an element are also termed as the children of that element and the container in which the children elements resides are the parent element. So to filter out the children of any element using the jQuery can be achieved using the jQuery children() method and the CSS (Cascading Style Sheet) child property.

Syntax

The Syntax used to achieve filter the children element in jQuery is.

$(parentElement).children(childProperty);

• parentElement − In the above Syntax the parent element can be termed as the main container which contains the number of children elements. For Example the div container, unordered list or the ordered list container can be termed as the parent element for the list children inside it.

• children() − This is a pre−defined method of jQuery which takes a single argument as a property of type string, which returns the total number of children of any element and filters it out on the basis of the condition passed as an argument in the method.

• childProperty − The child property in the above Syntax is termed as the CSS child property which is used to select the nth element which is being selected by the child property. There are certain child property that are widely used by the developers are:

  • :nth−child() − In this property it takes the 'n' as the input which selects the number of all the children in the parent element. For Example if we pass the value in the property as :nth−child(2n) then it will return all the even number of children or if we pass the value in the parameter as :nth−child(3) then it will return that particular child.

  • :first−child − In this child property it returns the first child of the parent element.

  • :last−child − In this child property it returns the last child of the parent element.

Algorithm

• Step 1 − Create a file in any text editor such as sublime editor or VS Code and name the filename as index.html and save it.

• Step 2 − Now add the HTML boilerplate to the file.

• Step 3 − Now Add the jQuery CDN(Content Delivery Network) to the head tag of the HTML to use the jQuery functionality in the file.

<script src="https://code.jquery.com/jquery-3.5.0.js"> </script>

• Step 4 − Now create an unordered list tag inside the body tag and create some children elements as list '<li>'.

<ul>
   <li>Child 1</li>
   <li>Child 2</li>
   <li>Child 3</li>
   <li>Child 4</li>
   <li>Child 5</li>
</ul>

• Step 5 − Now create a script tag after the unordered list tag is closed.

<script> </script>

• Step 6 − Now use the jQuery selector to ready a function when the program is loaded.

$(document).ready(() => {
})

• Step 7 − Use the selector Syntax to select the parent element.

$('ul')

• Step 8 − Now use the jQuery children() method to get the children of the parent element and pass the child property condition to the children method as ":nth-child(2n)".

$('ul').children(':nth-child(2n)')

• Step 9 − Now create a '.select' class inside the style tag and add styling to it.

<style>
   .select {
      background-color: green;
      display: inline-block;
      color: white;
      padding: 0.2rem;
   }
</style>

• Step 10 − Now add the addClass() method to indicate the filtered children and pass the class which is created above in the style tag..

$('ul').children(':nth-child(2n)').addClass("select");

• Step 11 − The program is ready to filter the number of children elements as the given condition in the children method.

Example

In this Example we will filter a sort of children from a parent element. For this we have created a parent element as the unordered list which acts as parent and inside this we will create a few list tags that will act as children of that element. For this we will be using the children() method and filter out the children in the parent element. To indicate the filtered children we have added styling to the filtered child.

<html>
<head>
   <title> filter children of any element </title>
   <style>
      .select {
         background-color: green;
         display: inline-block;
         color: white;
         padding: 0.2rem;
      }
   </style>
   <script src="https://code.jquery.com/jquery-3.5.0.js"> </script>
</head>
<body>
   <h3>Below given are child of parent element: </h3>
   <ul style="list-style: none;">
      <li>Child 1</li>
      <li>Child 2</li>
      <li>Child 3</li>
      <li>Child 4</li>
      <li>Child 5</li>
   </ul>
   <script>
      $(document).ready(() => {
         $('ul').children(':nth-child(2n)').addClass("select");
      })
   </script>
</body>
</html>

The given below image shows the Output of the above Example in which when the above program is loaded in the browser it shows the multiple child on the browser window as child 1, child 2, child 3, child 4 and child 5. As we have set the condition of nth−child() as '2n' which returns all the children which are at the even position and will indicate these children as green backgrounds.

Conclusion

This feature is used in any modern application to filter out the data, to select a certain amount of selected data on which we have to perform certain action. This type of feature can also be used in the employee management system as the information of the employee is stored in the form children and if an admin wants to filter the data at a certain conditions of any employee such as the name then he can use the above feature. We can create this feature dynamic by adding the input box in which data can be entered.