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:

Syntax:

Here is the simple syntax of the method:

.find(selector)

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.

Example:

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

<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
div{
padding:10px;
border:1px solid;
}
</style>
</head>
<body>
<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>
		</div>
	</div>

</div>
<br/>

<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">

$(document).ready(function(){

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

$('div').css('background','white');

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

});

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

$('div').css('background','white');

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

});

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

$('div').css('background','white');

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

});

});
</script>
</body>
</html>

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.