Find Method in jQuery

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