Saturday, 8 February 2014

Filter() And Find() In JQuery



Both filter() and find() methods are very similar, except the former is applies to all the elements, while latter searches child elements only.
To simple

  1.  filter() – search through all the elements.
  2.  find() – search through all the child elements only.

 <html>
<head>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<style type="text/css">
          div{
                   padding:8px;
                   border:1px solid;
          }
</style>

</head>

<body>

<h1>jQuery find() vs filter() example</h1>

<script type="text/javascript">

  $(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');

    });

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

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

No comments:

Post a Comment