• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

JQuery Filter Selector Example

May 30, 2014 //  by Krishna Srinivasan//  Leave a Comment

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:

  • Run JQuery Filter Selector Demo

JQuery Filter Selector Example

Category: jQueryTag: JQuery Selectors

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.

Previous Post: « Spring Data REST + GemFire + AngularJS Integration
Next Post: JQuery Image Selector Example jquery»

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact