The .find() method searches for descendent (child, grandchild, great-grandchild …any levels deep) elements that match the specified selector. Using the .find() method without any parameters just returns an empty jQuery object.

Other useful jQuery articles:


Here is the simple syntax of the method:


Retrieve the descendants of each element within the matched set that matches the specified selector. A string containing a CSS or custom jQuery selector to match elements against.


Following is a simple example for the understanding of this method:

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
border:1px solid;
<h1>Learning jQuery Find() Method</h1>

<div class="One">
	<div class="test">One-1</div>
	<div class="test">One-2</div>

	<div class="Two">
		<div class="test">Two-1</div>
		<div class="test">Two-2</div>

		<div class="Three">
			<div class="test">Three-1</div>
			<div class="test">Three-2</div>


<input type='button' value='Find div One' id='button1'>
<input type='button' value='Find div Two' id='button2'>
<input type='button' value='Find div Three' id='button3'>

<script type="text/javascript">


$("#button1").click(function () {


$('div .One').find('.test').css('background','blue');


$("#button2").click(function () {


$('div .Two').find('.test').css('background','blue');


$("#button3").click(function () {


$('div .Three').find('.test').css('background','blue');



I really hope that this article was useful to you. If you have any questions regarding this article, let me know in the comments below.

One thought

Comments are closed.