Java Tutorial Blog

JQuery Filter Selector Example

//  by 

This tutorial explains usage of the filter selector in jQuery. The filter selector is useful feature to filter all the elements from the set of matched elements that matches the selector or certain criteria given in the function’s test. It returns the elements that match only the filter selector. The elements which do not match the given criteria are removed from the selection and represents only matched elements. The supplied selector is used with each element and those elements that match the specified selector will be represented in the result. The filter selector is opposite of not selector.

JQuery Filter Selector Syntax

$(selector).filter(criteria)

It has parameter called criteria is a selector expression which specifies elements to be selected from the set of matched elements.

JQuery Filter Selector Example

<!doctype html>
<head>
<title>JQuery Filter Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h3>JQuery Filter Selector Example</h3>
<style>
.myclass
{
color:red;
}
</style>
<script type="text/javascript">
   $(document).ready(function(){
      $("#mybutton").click(function(){
         $("div").filter("#myval").css("border","3px solid red");
      });
      $("div").filter(function(index){
         return $("span",this).length==2;}).css("background-color","lightpink");
      $("p").filter(":even").css("background-color","orange");
      $( "span" ).filter( ":middle" ).css( "border", "3px solid green");
   });
</script>
<body style="line-height:1.2em">
   <div id="myval">This is First div.</div>
   <div id="myval1">This is Second div.</div>
   <div id="myval">This is Third div.</div>
   <button id="mybutton">Click to see filtered elements</button><br>
<fieldset>
<legend><strong>Using function index</strong></legend>
   <div>
      <span>Hello World!!!.</span>
   </div>
   <div>
      Welcome to jQuery.
   </div>
   <div>
      <span>It is <span>JavaScript</span> library.</span>
   </div>
   <div>
      <span>It is lightweight,"write less, do more",JavaScript library.   </span>
   </div>
   <div>
      <span>It is combination of <span>HTML, CSS</span> and JavaScript</span>
   </div>
</fieldset>
<fieldset>
<legend><strong>Returns all the elements that are even</strong></legend>
   <p>Hello World!!! 0</p>
   <p>Welcome to jQuery 1</p>
   <p>It is JavaScript library 2</p>
   <p>It is lightweight, "write less, do more", JavaScript library 3</p>
   <p>The purpose of jQuery is to make it much easier to use JavaScript on your website 4</p>
   <p>It is combination of HTML, CSS and JavaScript 5</p>
</fieldset>
<fieldset>
<legend><strong>Selecting middle elements</strong></legend>
   <span>My First Span</span>&nbsp;
   <span >My Second Span</span>&nbsp;
   <span >My Third Span</span>&nbsp;
   <span>My Fourth Span</span>&nbsp;
</fieldset>
</body>
</html>
  • As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
  • $(“#mybutton”).click(function()) line defines click method which occurs when an element is clicked.
  • $(“div”).filter(“#myval”).css(“border”,”3px solid red”); line defines filter selector that filters all the elements from the set of matched elements that do not match specified selector. Here, it matches the elements those have specified idmyval and when we click on the button, it represent filtered elements with red color border.
  • $(“div”).filter(function(index)) line allows to filter against a function rather than a selector. If function returns true, then element will be included in filter set or else it will be excluded.
  • The next line contains two span elements, which refers to each element in the document. It will display the elements with lightpink color which contains exact two span elements.
  • $(“p”).filter(“:even”).css(“background-color”,”orange”); line filter the elements which are of type even. The resulting elements will get display with orange color background.
  • $( “span” ).filter( “:middle” ).css( “border”, “3px solid green”); line defines span elements which contains with green color border. It adds the border to middle elements.

JQuery Filter Selector Demo

When you run the above example, you would get the following output:

JQuery Filter Selector Example

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.