.filter()

Syntax

.filter(selector)
selector: A string containing a selector expression to match elements against
.filter(function)
function: A function used as a test for each element in the set

Return value

The new jQuery object.

Description

Reduce the set of matched elements by the selector or the function.

Examples

Using a filter function

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          $("div").css("background", "blue")
            .filter(function (index) {
                  return  $(this).attr("id") == "fourth" ;
            })
            .css("border", "1px solid red");

        });
    </script>
     <style>
     div { border:2px white solid;}
  </style>

  </head>
  <body>
    <body>
      <div id="first">asdf</div>
      <div id="second">asdf</div>
      <div id="third">asdf</div>
      <div id="fourth">asdf</div>
      <div id="fifth">asdf</div>
      <div id="sixth">asdf</div>


  </body>
</html>
Click to view the demo

Filter by index

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          $("div").css("background", "blue")
            .filter(function (index) {
                  return index == 1 ;
            })
            .css("border", "1px solid red");

        });
    </script>
     <style>
     div { border:2px white solid;}
  </style>

  </head>
  <body>
    <body>
      <div id="first">asdf</div>
      <div id="second">asdf</div>
      <div id="third">asdf</div>
      <div id="fourth">asdf</div>
      <div id="fifth">asdf</div>
      <div id="sixth">asdf</div>
  </body>
</html>
Click to view the demo

Filter class out

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
          $("div").css("background", "yellow").filter(".blue").css("border-color", "red");
        });
    </script>
     <style>
     div { border:2px white solid;}
  </style>

  </head>
  <body>
    <body>
      <div class=blue>asdf</div>
      <div>asdf</div>
      <div>asdf</div>
      <div>asdf</div>
      <div>asdf</div>
      <div>asdf</div>

  </body>
</html>
Click to view the demo

Filter node type

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
           $("p").contents().filter(function(){ return this.nodeType != 1; }).wrap("<b/>");

        });
    </script>
  </head>
  <body>
    <body>
        <p>Hello <span>span</span>data</p>

  </body>
</html>
Click to view the demo

Filters out all elements matching the given selector

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
          $("input:not(:checked) + span").css("background-color", "yellow");
      });
    </script>
  </head>
  <body>
   <form>
    <input type="checkbox" name="a" />
    <span>A</span>
    <input type="checkbox" name="b" />
    <span>B</span>
    <input type="checkbox" name="c" checked="checked" />
    <span>C</span>
  </form>
  </body>
</html>
Click to view the demo

filter with .hasClass

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type='text/javascript'>
        $(document).ready(
          function() {
            $('li')
              .filter(
                function() {
                  return $(this).hasClass('my2') || $(this).hasClass('my3');
                }
              )
              .addClass('mySelected');
          }
        );
    </script>
    <style type='text/css'>
        ul {
            list-style: none;
            margin: 5px;
            padding: 0;
        }
        li.mySelected {
            background: #a1e6b2;
            border: 4px solid #93daa4;
        }
    </style>
  </head>
  <body>
     <ul>
       <li class='my3'>A</li>
       <li class='my2'>B</li>
       <li class='my3'>C</li>
       <li class='my2'>D</li>
       <li class='my'>E</li>
     </ul>
  </body>
</html>
Click to view the demo
Home 
  JavaScript Book 
    jQuery  

DOM:
  1. jQuery DOM
  2. $("html tags"):generate code with the jQuery wrapper function.
  3. .add()
  4. .addClass()
  5. .after()
  6. .andSelf()
  7. .append()
  8. .appendTo()
  9. .attr()
  10. .before()
  11. .children()
  12. .clone()
  13. .closest()
  14. .contents()
  15. .css()
  16. .detach()
  17. .filter()
  18. .first()
  19. .get()
  20. .has()
  21. .hasClass()
  22. .height()
  23. .html()
  24. .index()
  25. .innerHeight()
  26. .innerWidth()
  27. .insertAfter()
  28. .insertBefore()
  29. .is()
  30. .last()
  31. .map()
  32. .next()
  33. .nextAll()
  34. .nextUntil()
  35. .not()
  36. .offset()
  37. .offsetParent()
  38. .outerHeight()
  39. .outerWidth()
  40. .parent()
  41. .parents()
  42. .parentsUntil()
  43. .position()
  44. .prepend()
  45. .prependTo()
  46. .prev()
  47. .prevAll()
  48. .prevUntil()
  49. .remove()
  50. .removeClass()
  51. .removeAttr()
  52. .replaceAll()
  53. .replaceWith()
  54. .siblings()
  55. .scrollLeft()
  56. .scrollTop()
  57. .slice()
  58. .text()
  59. .toArray()
  60. .toggleClass()
  61. .unwrap()
  62. .val()
  63. .wrap()
  64. .wrapAll()
  65. .wrapInner()
  66. .width()