.filter()

In this chapter you will learn:

Syntax and Description for .filter() method
How to filter element by its id
How to filter by index
How to filter by css style
How to filter by node type

Syntax and Description

filter method reduces the set of matched elements by the selector or the function.

.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

The Return value is the new jQuery object.

Filter by attribute id

The following code selects all div elements and changes the background color. Then it filter div elements by its id value. After that it adds border for the filtered elements.

<html><!--from ja v  a 2 s  .c o  m-->
  <head>
    <script src="http://java2s.com/style/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">java2s.com</div>
      <div id="second">java2s.com</div>
      <div id="third">java2s.com</div>
      <div id="fourth">java2s.com</div>
      <div id="fifth">java2s.com</div>
      <div id="sixth">java2s.com</div>


  </body>
</html>

Click to view the demo

Filter by index

The following code filters div elements by index.

<html><!--from j  av a  2s .c om-->
  <head>
    <script src="http://java2s.com/style/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">java2s.com</div>
      <div id="second">java2s.com</div>
      <div id="third">java2s.com</div>
      <div id="fourth">java2s.com</div>
      <div id="fifth">java2s.com</div>
      <div id="sixth">java2s.com</div>
  </body>
</html>

Click to view the demo

Filter by css style

Filter method can remove elements with specified class name.

<html><!--   ja v  a2 s. co  m-->
  <head>
    <script src="http://java2s.com/style/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>java2s.com</div>
      <div>java2s.com</div>
      <div>java2s.com</div>
      <div>ja va2s.com</div>
      <div>java2s.com</div>
      <div>java2s.com</div>

  </body>
</html>

Click to view the demo

Filter by node type

The following code shows how to filter by node type.

<html><!-- j a  v  a 2  s . c  om-->
  <head>
    <script src="http://java2s.com/style/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. java2s.com</p>

  </body>
</html>

Click to view the demo

Next chapter...

What you will learn in the next chapter: