JSFiddle - React, Tailwind, and code Playground

by bhatkrishnakishor

HTML

<html>
<head>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</head>
<body>
    <h1>jQuery find() vs filter() example</h1>
    <div id="Fruits">
        Fruits
        <div id="Apple">Apple</div>
        <div id="Banana">Banana</div>
    </div>     
    <div id="Category">
        Category
        <div id="Fruits">Fruits</div>
        <div id="Animals">Animals</div>
    </div>
    <br/><br/><br/>
    <input type='button' value='filter(Fruits)' id='filterClick'>
    <input type='button' value='find(Fruits)' id='findClick'>     
</body>
</html>

CSS

div{ padding:8px; border:1px solid; }

JavaScript

//Difference Between Filter() And Find() In JQuery
$(document).ready(function(){     
        $("#filterClick").click(function () {
            $('div').css('background','white');     
            $('div').filter('#Fruits').css('background','red');
        });     
        
        $("#findClick").click(function () {
            $('div').css('background','white');
            $('div').find('#Fruits').css('background','red');
        });     
    });