JQuery provides us the feature to find the element by a selector, JQuery object or element. Now we discuss all the three elements by example:

Syntax:

.find(selector)

.find(jQuery object)

.find(element)

.Find(selector)- Here we check the elements that they are matching the selector or not.

<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
<ul class="List1">
<li class="Item1">(a)</li>
<li class="Item2">(b)
<ul class="List2">
<li class="SubItem1">1)</li>
<li class="SubItem2">2)
<ul class="List3">
<li class="SubList1">One</li>
<li class="SubList2">Two</li>
<li class="SubList3">Three</li>
</ul>
</li>
<li class="SubItem3">3)</li>
</ul>
</li>
<li class="Item3">(c)</li>
</ul>
<script>
$('li.Item2').find('li').css('color', 'Blue');</script>
</body>
</html>

img1.gif

In the next example we search all the <p> tag and <span> elements in the <div> tag and change its color.

<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
<div><p>Hii</p>My Name is Mahak Gupta</div>
<div>I Love <span>ASP.NET</span>.</p>
<script>
$("div").find("p").css('color', 'Brown');
$("div").find("span").css('color', 'Blue');
</script>
</body>
</html>

img2.gif

If we want to search all the <span> elements in our program by the code.

<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
</head>
<body>
<p><span>Hii</span>,My Name is Mahak</p>
<p>How are you??? <span>I'm Fine</span>.</p>
<div>I Love <span>Asp.net</span> </div>
<script>
var x = $('span');
$("p").find(x).css('color', 'Blue');
</script>


</body>
</html>

img3.gif

Now we take another example of .find method in jquery, Here we use this method by class.

<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("p").find("span").addClass("changeforecolor");
});

</script>
<style>
.changeforecolor{ color:blue; }
</style>
</head>
<body>
<div>
<p><span class="changeforecolor">HII</span>,My anme is Mahak Gupta</p>
<p>I Think <span class="changeforecolor">JQUery Is Good</span>.</p>
<p>Its Cool<span class="changeforecolor">,To Use Jquey</span>.</p>
</div>
</body>
</html>

img4.gif