Jquery find function allows you to search for elements inside a given container. You can combine the powerful functionality of jquery find with some other functions and do some amazing client side manipulations without connecting to the server side. Throughout this tutorial I’ll show you practical examples of using jquery find in real world web applications.

var active_elements = $('body').find('.active');

 
Above code will find list of elements inside body tag which uses the css class active.

 

var active_elements = $('body').find('div');

 
Above code will find list of div elements inside body tag.

When you use jquery find function, it will result in a list of elements. Following code shows you how to loop through the list with javascript for loop.

var active_elements = $('body').find('div');
for(var i=0;i<active_elements.length;i++){
                   console.log($(active_elements[i]).html());
}

You can use console.log method to print the result into firebug console for testing purposes.

var active_elements = $('body').find('div');
active_elements.each(function(){
                    console.log($(this).html());
});

You can see that main difference in 2 types is that in for loop you have to access element using the array index and in each loop you can use this keyword to access the current element.
 

In this section I’ll give you the practical examples of using jquery find in real world projects. Only the code is provided in this section. For detailed explanation you can ask through the comment form.

Following code snippet can be used to assign background colours to table rows and headers based on certain conditions.
 

<script type="text/javascript">
            $(document).ready(function(){
                $('#sampleTBL').find("tr:even").css("background-color","#EEEEEE");
                $('#sampleTBL').find("tr:odd").css("background-color","#CFCFCF");
                $('#sampleTBL').find("tr:first").css("background-color","#B3B8B3");
            });
             
            var assign_colors = function(){
		var head = ($('#tbl_head').val() == '') ? '#B3B8B3' : $('#tbl_head').val();
		var even = ($('#tbl_even').val() == '') ? '#EEEEEE' : $('#tbl_even').val();
		var odd = ($('#tbl_odd').val() == '') ? '#CFCFCF' : $('#tbl_odd').val();
		$('#sampleTBL').find("tr:even").css("background-color",even);
                $('#sampleTBL').find("tr:odd").css("background-color",odd);
                $('#sampleTBL').find("tr:first").css("background-color",head);
	    };
</script>
 
Header Color

Even Color

Odd Color




Name
Marks


John
77


Adam
45


Ben
87


Stewart
67


Jason
95


Chris
56


Mark
34


Paul
86

• sampleTBL is the ID of the table.
• Table header is coloured using :first pseudo-class.
• Even rows in the table are coloured using :even pseudo-class.
• Odd rows in the table are coloured using :first pseudo-class.
• View Demo to see the complete codes live in action.

Try Demo

We use tables in most of the web applications. Using jquery find and some other jquery functions we can search through the values of table data and apply certain conditions without connecting to the server side code. In this example I am going to show you how to search a student marks table and mark the students who have passed the exam according to the marks specified dynamically.

<script type="text/javascript">
            $(document).ready(function(){
                $('#sampleTBL').find("tr:even").css("background-color","#EEEEEE");
                $('#sampleTBL').find("tr:odd").css("background-color","#CFCFCF");
                $('#sampleTBL').find("tr:first").css("background-color","#B3B8B3");
            });
		 
	    var search_table_values = function(){
                var pass = ($('#tbl_pass').val() == '') ? '75' : $('#tbl_pass').val();
 
		$('#sampleTBL').find("td:not(:first-child)").each(function(){
                    var marks = parseInt($(this).html());
                    if(marks >= pass){
                        $(this).css("background-color","green");
                    }else{
                        $(this).css("background-color","red");
                    }
                    $(this).css("color","#FFF");
                });
	    };
 
</script>
 
Pass Marks  <input type='text' id='tbl_pass' />
<input type='button' onclick='search_table_values();' value='Show Passed Students ' />
 
<table id="sampleTBL">
            <thead>
                <th>Name</th><th>Maths</th><th>English</th><th>Science</th><th>Music</th>
            </thead>
            <tr>
                <td>John</td><td>77</td><td>22</td><td>56</td><td>85</td>
            </tr>
            <tr>
                <td>Adam</td><td>45</td><td>75</td><td>60</td><td>82</td>
            </tr>
            <tr>
                <td>Ben</td><td>87</td><td>83</td><td>77</td><td>80</td>
            </tr>
            <tr>
                <td>Stewart</td><td>67</td><td>55</td><td>68</td><td>47</td>
            </tr>
            <tr>
                <td>Jason</td><td>95</td><td>47</td><td>12</td><td>32</td>
            </tr>
            <tr>
                <td>Chris</td><td>56</td><td>95</td><td>97</td><td>35</td>
            </tr>
            <tr>
                <td>Mark</td><td>34</td><td>58</td><td>77</td><td>99</td>
            </tr>
            <tr>
                <td>Paul</td><td>86</td><td>76</td><td>65</td><td>48</td>
            </tr>
        </table>

 

• First 3 lines of jquery code will highlight odd,even and table header rows with different colours as we did in previous example.
• Once you enter the pass marks on the textbox and click Show Passed Students button,search_table_values function will be called
• Inside the function first we get the value of the textbox. If it is not set we assign default value of 75 as pass marks.
• Then we traverse through each td element found through the find expression using jquery each loop.
• Expression used for the find function is “td:not(:first-child)” . We only have to traverse through marks td elements.
• Name column will be the first child of each row. So we have removed the td elements of first column using :not(:first-child) selectors. It will select all the td elements which are not the first element of tr.
• Then we get the marks of each table data using the html() function and convert into int value.
• Next we check if the students is passed or failed and assigns repective colours using jquery css function.

 

Try Demo

In this example I’ll show you how to convert multi level unordered list into a hovering menu using jquery find.

<script type="text/javascript">
            $(document).ready(function(){
                $('#test_menu').find('ul').css("display","none");
            });
             
            var index = 0;
            var recurse_find_ul = function(element){
                index++;
                var classname = "lc"+index;
                element.attr("class",classname);
                 
                var hover_class = $(".lc"+index+" li");
                var hover_find  = ".lc"+parseInt(index+1)+"";
                hover_class.on('hover', function() {
                    $(this).find(hover_find).toggle();
                });
                 
                var next_ul = element.find('ul');
                if(next_ul.length != '0'){
                    recurse_find_ul(next_ul);
                }
                  
            };
             
            var create_menu = function(element_id){
                recurse_find_ul($("#"+element_id));
            };
 
</script>
 

 

Level 1.1
Level 1.2
Level 1.3

Level 2.1
Level 2.2


Level 1.4
Level 1.5

Level 2.1

Level 3.1
Level 3.2


Level 2.2

Level 3.1

Level 4.1
Level 4.2


Level 3.2


Level 2.3

Level 3.1
Level 3.2

Try Demo