jQuery Find Function Example

Let's have a closer look at the jQuery .find() function.

Demo Code Download

Description

The .find() function is really useful for matching elements filtered by a selector, jQuery object, or element. There is also a function called .children() which only searches the direct child siblings of the matched elements. Lets have a look at an example of the find jQuery function in action. Further Reading »

Demo

jQuery Function Demo - jQuery4u.com

Demo: Finding specific descendants of matched elements.

Run Demo View Code



  • Folder 1
    • Subfolder 1
      • Item 1.1.1
    • Subfolder 2
      • Item 1.2.1
        • Item 1.2.1.1
        • Item 1.2.1.2
  • Folder 2
    • Item 1.3.1
      • Item 1.3.1.1
      • Item 1.3.1.2

Download

The download package includes all the inline HTML, CSS, JavaScript, jQuery and images required for the .find() function demo so you can try it yourself and change as you please.

The full code listing for all jQuery functions have been now added to GitHub, you can get them there, we are making them work with the latest versions of jQuery!

Code

<!-- Copyright 2011 jQuery4u.com -->
<!DOCTYPE html>
<html>
<title>jQuery Function Demo - jQuery4u.com</title>
<head>
    <script src="http://www.jquery4u.com/function-demos/js/jquery-1.6.4.min.js"></script>
    <script src="http://www.jquery4u.com/scripts/function-demos-script.js"></script>

    <script type="text/javascript">

    var JQFUNCS =
    {
        runFunc:
        {
            /* ------------------------------ find Demo ------------------------------ */
            "find":
            {
                run: function(id)
                {
                    var demobox = $('#'+id+' #filetree'), demoboxSpans = $('#'+id+' span');
                    $('#'+id+' .ffbtn').live('click', function(e)
                    {
                        demoboxSpans.css({"background-color":""})
                        demobox.find('.folder').css({"background-color":"yellow"});
                    });
                    $('#'+id+' .fibtn').live('click', function(e)
                    {
                        demoboxSpans.css({"background-color":""})
                        demobox.find('.file').css({"background-color":"yellow"});
                    });
                },

                reset: function(id)
                {
                    $('#'+id+' span').css({"background-color":""});
                    $('#'+id).hide();
                }
            }
        }
    }

    </script>

</head>
<body>

<h3>Demo: Finding specific descendants of matched elements.</h3>
<p><a href="#" id="find-demobtn" class="demobtn btn actionr">Run Demo</a> <a href="#" id="find-codebtn" class="codebtn btn actionr">View Code</a> <a href="#" id="find-resetbtn" class="resetbtn btn actionr" style="display: none;">Reset</a></p>
<div class="demoarea" id="find" style="border:1px solid orange; padding:25px;">
<button class="ffbtn btn">find(folders)</button> <button class="fibtn btn">find(items)</button>
<br/><br/>
    <ul id="filetree">
        <li><span class="folder">Folder 1</span>
            <ul>
                <li><span class="folder">Subfolder 1</span>
                    <ul>
                        <li><span class="file">Item 1.1.1</span></li>
                    </ul>
                </li>
                <li><span class="folder">Subfolder 2</span>
                    <ul>
                        <li><span class="file">Item 1.2.1</span></li>
                            <ul>
                                <li><span class="file">Item 1.2.1.1</span></li>
                                <li><span class="file">Item 1.2.1.2</span></li>
                            </ul>
                    </ul>
                </li>
            </ul>
        </li>
        <li><span class="folder">Folder 2</span>
            <ul>
                <li><span class="file">Item 1.3.1</span></li>
                    <ul>
                        <li><span class="file">Item 1.3.1.1</span></li>
                        <li><span class="file">Item 1.3.1.2</span></li>
                    </ul>
            </ul>
        </li>
    </ul>
</div>

</body>
</html>
<!-- Copyright 2011 jQuery4u.com -->