Learn jQuery find and children methods: compared with examples

Why we use jQuery children and find methods?

The children and find methods are used to get the decedent of the specified elements like a div, paragraph, span, HTML table etc.

It can be a selector or jQuery objects as well that you can specify in these two methods.

What is the difference?

The jQuery $.find method may travel through multiple levels down to get the descendent elements. Whereas, the $.children method can go to just one level down.

Still unclear? I will explain with examples.

An example to understand the children and find jQuery methods

To demonstrate the two methods, I have created following structure in DOM:

 

Where the div is a parent of paragraph and grand-parent of the span element. Two buttons are given in the example page where div element is specified in both methods.

As you click the “Execute children” and “Execute find” buttons, it will add text but there is a difference. See this online and I will explain.

jQuery find

See online demo and code

You see, as the “Execute children” button is clicked, it appended text in the paragraph. The following code is used in the click event of that button:

 

Where the #children_demo is the ID of the div element. So, it will add the given text in the child paragraph. If you want to add text in <span> element, which is the grandchild of that div, you can’t do it by specifying the grand-parent.

Now, this code is executed under the “Execute $.find” button:

 

The jQuery find method allows specifying the children or grand-children and so on descendant that enables to perform some action at any level down the tree. In that example, you may specify the <p> as well, rather <span> element.

However, If you specified “span” in children method in above example, it will not work. That means the following code would not work:

 

 

An example to filter descendant in $.children method

In $.children method, you may filter the descendants if there are two or  more children under that parent. Consider, the above <div> has two or more paragraphs as children. You want to change the CSS of only second child paragraph; this is how you can do it.

jQuery children

See online demo and code

Initially, the background color of both child paragraphs is the same as example page loads. As you click the button to execute the $.children method, the following jQuery code is used:

 

A parent div is specified in the children method. The div has two paragraphs and I filtered the second one so background-color of the second paragraph changed. If the ID was not specified in above code, the background-color of both paragraphs would have changed by using this:

 

An example of $.find method with HTML lists and links

In this example, a menu is created by using a <div> as parent, and <ul>, <li> and <a> as its children. As you bring the mouse over any link, the hover event occurs where the $.hover method is executed.

Inside the $.hover method, three (*) are appended ahead of the current link by using the $.append method. As mouse pointer is taken out of that link, the jQuery $.find method executes where those (*) are removed. See the example and code online:

jQuery find list

See online demo and code

The following jQuery code is used in the example:

 

An example of $.children method with HTML table

In this example, the table element is used in the $.children jQuery method to apply the border by using the $.css method. As table’s first child is <tbody>, check how the border is applied.

See the output online by clicking the button in demo page:

jQuery children table

See online demo and code

At the click event of the button, following jQuery code is executed:

 

You can see, the border with 3-pixels is applied all around and not in the <td>s.

Note: Although <tbody> is not used in the <table> structure of example page, it is automatically created. The <tr> is the child of <tbody>.

By using the table element and $.find method, check how it is applied.

A demo of HTML table with $.find method of jQuery

Now, using the same example as above except children method is replaced by $.find method and “td” is used. See the output:

jQuery find table

See online demo and code

The border is applied to all <td>s by using the $.find method. The following code is used:

 

If you want to apply the style to only a specific row or table data, you may use the filter rather than a selector simply. See the following example.

A demo to apply filter in $.find method for HTML table

You may use pseudo elements to filter only set of rows or table data to apply style or perform some other action.

For example, to apply CSS in the first row only:

 

To apply it to the second row, use:

 

And so on.

See the following demo, where I used the $.find method to apply borders to even rows.

jQuery find filter table

See online demo and code

The following code is executed in the click event of button:

 

See the complete code with markup and style in the demo page.